React UI Components Documentation

Sets or gets the tooltip's horizontal position if the position property is set to 'absolute'.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTooltip, { ITooltipProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtooltip';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, ITooltipProps> {
  private myTooltip = React.createRef<JqxTooltip>();  
  
  public render() {
    return (
      <JqxTooltip ref={this.myTooltip} 
        content={'This is a jqxButton'} position={'absolute'} absolutePositionX={20}>
        <JqxButton :width="500">Hover to see the tooltip</JqxButton>
      </JqxTooltip>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the tooltip's vertical position if the position property is set to 'absolute'.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTooltip, { ITooltipProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtooltip';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, ITooltipProps> {
  private myTooltip = React.createRef<JqxTooltip>();  
  
  public render() {
    return (
      <JqxTooltip ref={this.myTooltip} 
        content={'This is a jqxButton'} position={'absolute'} absolutePositionY={20}>
        <JqxButton :width="500">Hover to see the tooltip</JqxButton>
      </JqxTooltip>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the tooltip will automatically hide after duration equal to the autoHideDelay property.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTooltip, { ITooltipProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtooltip';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, ITooltipProps> {
  private myTooltip = React.createRef<JqxTooltip>();  
  
  public render() {
    return (
      <JqxTooltip ref={this.myTooltip} 
        content={'This is a jqxButton'} position={'bottom'} autoHide={false}>
        <JqxButton :width="500">Hover to see the tooltip</JqxButton>
      </JqxTooltip>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the duration after which the tooltip automatically hides (works only if the autoHide property is set to true). If autoHideDelay is set to 0, the tooltip hides only after the mouse has left the parent element.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTooltip, { ITooltipProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtooltip';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, ITooltipProps> {
  private myTooltip = React.createRef<JqxTooltip>();  
  
  public render() {
    return (
      <JqxTooltip ref={this.myTooltip} 
        content={'This is a jqxButton'} position={'mouse'} autoHideDelay={100}>
        <JqxButton :width="500">Hover to see the tooltip</JqxButton>
      </JqxTooltip>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the duration of the tooltip animation at show.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTooltip, { ITooltipProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtooltip';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, ITooltipProps> {
  private myTooltip = React.createRef<JqxTooltip>();  
  
  public render() {
    return (
      <JqxTooltip ref={this.myTooltip} 
        content={'This is a jqxButton'} position={'mouse'} animationShowDelay={2000}>
        <JqxButton :width="500">Hover to see the tooltip</JqxButton>
      </JqxTooltip>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the duration of the tooltip animation at hide.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTooltip, { ITooltipProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtooltip';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, ITooltipProps> {
  private myTooltip = React.createRef<JqxTooltip>();  
  
  public render() {
    return (
      <JqxTooltip ref={this.myTooltip} 
        content={'This is a jqxButton'} position={'mouse'} animationHideDelay={2000}>
        <JqxButton :width="500">Hover to see the tooltip</JqxButton>
      </JqxTooltip>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the content of jqxTooltip. It can be either plain text or HTML code.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTooltip, { ITooltipProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtooltip';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, ITooltipProps> {
  private myTooltip = React.createRef<JqxTooltip>();  
  
  public render() {
    return (
      <JqxTooltip ref={this.myTooltip} 
        content={'This is a jqxButton'} position={'mouse'}>
        <JqxButton :width="500">Hover to see the tooltip</JqxButton>
      </JqxTooltip>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the tooltip will close if it is clicked.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTooltip, { ITooltipProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtooltip';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, ITooltipProps> {
  private myTooltip = React.createRef<JqxTooltip>();  
  
  public render() {
    return (
      <JqxTooltip ref={this.myTooltip} 
        content={'This is a jqxButton'} position={'mouse'} closeOnClick={false}>
        <JqxButton :width="500">Hover to see the tooltip</JqxButton>
      </JqxTooltip>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the tooltip is disabled.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTooltip, { ITooltipProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtooltip';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, ITooltipProps> {
  private myTooltip = React.createRef<JqxTooltip>();  
  
  public render() {
    return (
      <JqxTooltip ref={this.myTooltip} 
        content={'This is a jqxButton'} position={'mouse'} disabled={true}>
        <JqxButton :width="500">Hover to see the tooltip</JqxButton>
      </JqxTooltip>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether jqxTooltip will be hidden if it leaves the browser bounds or will be offset so that it is always within the browser's bounds and visible.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTooltip, { ITooltipProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtooltip';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, ITooltipProps> {
  private myTooltip = React.createRef<JqxTooltip>();  
  
  public render() {
    return (
      <JqxTooltip ref={this.myTooltip} 
        content={'This is a jqxButton'} position={'mouse'} enableBrowserBoundsDetection={false}>
        <JqxButton :width="500">Hover to see the tooltip</JqxButton>
      </JqxTooltip>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the height of jqxTooltip.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTooltip, { ITooltipProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtooltip';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, ITooltipProps> {
  private myTooltip = React.createRef<JqxTooltip>();  
  
  public render() {
    return (
      <JqxTooltip ref={this.myTooltip} 
        content={'This is a jqxButton'} position={'mouse'} height={30}>
        <JqxButton :width="500">Hover to see the tooltip</JqxButton>
      </JqxTooltip>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the horizontal offset of jqxTooltip based on the position property.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTooltip, { ITooltipProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtooltip';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, ITooltipProps> {
  private myTooltip = React.createRef<JqxTooltip>();  
  
  public render() {
    return (
      <JqxTooltip ref={this.myTooltip} 
        content={'This is a jqxButton'} position={'bottom'} left={100}>
        <JqxButton :width="500">Hover to see the tooltip</JqxButton>
      </JqxTooltip>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the name of the tooltip's group. Only one tooltip from a group can be shown at a time. By default, all tooltips are in a single group.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTooltip, { ITooltipProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtooltip';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, ITooltipProps> {
  private myTooltip = React.createRef<JqxTooltip>();  
  
  public render() {
    return (
      <JqxTooltip ref={this.myTooltip} 
        content={'This is a jqxButton'} position={'mouse'} name={'tooltipGroup1'}>
        <JqxButton :width="500">Hover to see the tooltip</JqxButton>
      </JqxTooltip>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the tooltip's opacity.The value must be between 0 and 1.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTooltip, { ITooltipProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtooltip';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, ITooltipProps> {
  private myTooltip = React.createRef<JqxTooltip>();  
  
  public render() {
    return (
      <JqxTooltip ref={this.myTooltip} 
        content={'This is a jqxButton'} position={'mouse'} opacity={0.5}>
        <JqxButton :width="500">Hover to see the tooltip</JqxButton>
      </JqxTooltip>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the position of jqxTooltip.

'top' - the tooltip shows above the host element

'bottom' - the tooltip shows below the host element

'left' - the tooltip shows at the left of the host element

'right' - the tooltip shows at the right of the host element

'top-left' - the tooltip shows at the top-left side of the host element

'bottom-left' - the tooltip shows at the bottom-left side of the host element

'top-right' - the tooltip shows at the top-right side of the host element

'bottom-right' - the tooltip shows at the bottom-right side of the host element

'absolute' - the tooltip shows at an absolute position on screen, defined by the coordinate properties absolutePositionX and absolutePositionY

'mouse' - the tooltip shows after a short period of time at the position of the mouse cursor

'mouseenter' - the tooltip shows where the mouse cursor has entered the host element

'default' - the tooltip shows at the bottom-right side of the host element but does not make use of the left and top properties

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTooltip, { ITooltipProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtooltip';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, ITooltipProps> {
  private myTooltip = React.createRef<JqxTooltip>();  
  
  public render() {
    return (
      <JqxTooltip ref={this.myTooltip} 
        content={'This is a jqxButton'} position={'mouse'}>
        <JqxButton :width="500">Hover to see the tooltip</JqxButton>
      </JqxTooltip>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the jqxTooltip's right-to-left support is enabled.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTooltip, { ITooltipProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtooltip';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, ITooltipProps> {
  private myTooltip = React.createRef<JqxTooltip>();  
  
  public render() {
    return (
      <JqxTooltip ref={this.myTooltip} 
        content={'This is a jqxButton'} position={'mouse'} rtl={true}>
        <JqxButton :width="500">Hover to see the tooltip</JqxButton>
      </JqxTooltip>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the duration after which the tooltip will be shown.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTooltip, { ITooltipProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtooltip';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, ITooltipProps> {
  private myTooltip = React.createRef<JqxTooltip>();  
  
  public render() {
    return (
      <JqxTooltip ref={this.myTooltip} 
        content={'This is a jqxButton'} position={'mouse'} showDelay={200}>
        <JqxButton :width="500">Hover to see the tooltip</JqxButton>
      </JqxTooltip>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the tooltip's arrow will be shown.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTooltip, { ITooltipProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtooltip';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, ITooltipProps> {
  private myTooltip = React.createRef<JqxTooltip>();  
  
  public render() {
    return (
      <JqxTooltip ref={this.myTooltip} 
        content={'This is a jqxButton'} position={'mouse'} showArrow={false}>
        <JqxButton :width="500">Hover to see the tooltip</JqxButton>
      </JqxTooltip>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the vertical offset of jqxTooltip based on the position property.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTooltip, { ITooltipProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtooltip';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, ITooltipProps> {
  private myTooltip = React.createRef<JqxTooltip>();  
  
  public render() {
    return (
      <JqxTooltip ref={this.myTooltip} 
        content={'This is a jqxButton'} position={'mouse'} top={100}>
        <JqxButton :width="500">Hover to see the tooltip</JqxButton>
      </JqxTooltip>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the way of triggering the tooltip.

'hover' - the tooltip shows immeadiately after hovering over the host element.

'click' - the tooltip shows when the host element is clicked

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTooltip, { ITooltipProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtooltip';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, ITooltipProps> {
  private myTooltip = React.createRef<JqxTooltip>();  
  
  public render() {
    return (
      <JqxTooltip ref={this.myTooltip} 
        content={'This is a jqxButton'} position={'mouse'} trigger={'click'}>
        <JqxButton :width="500">Hover to see the tooltip</JqxButton>
      </JqxTooltip>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTooltip, { ITooltipProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtooltip';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, ITooltipProps> {
  private myTooltip = React.createRef<JqxTooltip>();  
  
  public render() {
    return (
      <JqxTooltip ref={this.myTooltip} 
        content={'This is a jqxButton'} position={'mouse'} theme={'material'}>
        <JqxButton :width="500">Hover to see the tooltip</JqxButton>
      </JqxTooltip>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the width of jqxTooltip.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTooltip, { ITooltipProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtooltip';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, ITooltipProps> {
  private myTooltip = React.createRef<JqxTooltip>();  
  
  public render() {
    return (
      <JqxTooltip ref={this.myTooltip} 
        content={'This is a jqxButton'} position={'mouse'} width={200}>
        <JqxButton :width="500">Hover to see the tooltip</JqxButton>
      </JqxTooltip>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the tooltip is closed (hidden).

Code examples

Bind to the close event of jqxTooltip.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTooltip, { ITooltipProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtooltip';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, ITooltipProps> {
  private myTooltip = React.createRef<JqxTooltip>();  
  
  public render() {
    return (
      <JqxTooltip ref={this.myTooltip} onClose={this.onClose} 
        content={'This is a jqxButton'} position={'mouse'}>
        <JqxButton :width="500">Hover to see the tooltip</JqxButton>
      </JqxTooltip>
    );
  }
 
  private onClose(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the tooltip is closing.

Code examples

Bind to the closing event of jqxTooltip.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTooltip, { ITooltipProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtooltip';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, ITooltipProps> {
  private myTooltip = React.createRef<JqxTooltip>();  
  
  public render() {
    return (
      <JqxTooltip ref={this.myTooltip} onClosing={this.onClosing} 
        content={'This is a jqxButton'} position={'mouse'}>
        <JqxButton :width="500">Hover to see the tooltip</JqxButton>
      </JqxTooltip>
    );
  }
 
  private onClosing(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the tooltip is opened (shown).

Code examples

Bind to the open event of jqxTooltip.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTooltip, { ITooltipProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtooltip';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, ITooltipProps> {
  private myTooltip = React.createRef<JqxTooltip>();  
  
  public render() {
    return (
      <JqxTooltip ref={this.myTooltip} onOpen={this.onOpen} 
        content={'This is a jqxButton'} position={'mouse'}>
        <JqxButton :width="500">Hover to see the tooltip</JqxButton>
      </JqxTooltip>
    );
  }
 
  private onOpen(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the tooltip is opening.

Code examples

Bind to the opening event of jqxTooltip.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTooltip, { ITooltipProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtooltip';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, ITooltipProps> {
  private myTooltip = React.createRef<JqxTooltip>();  
  
  public render() {
    return (
      <JqxTooltip ref={this.myTooltip} onOpening={this.onOpening} 
        content={'This is a jqxButton'} position={'mouse'}>
        <JqxButton :width="500">Hover to see the tooltip</JqxButton>
      </JqxTooltip>
    );
  }
 
  private onOpening(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Specifies a time before the tooltip closes. If it is not set, the tooltip closes immediately.

Destroys the tooltip by removing it from the DOM.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTooltip, { ITooltipProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtooltip';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, ITooltipProps> {
  private myTooltip = React.createRef<JqxTooltip>();
 
  public componentDidMount(): void {
    this.myTooltip.current!.destroy();
  }
   
  
  public render() {
    return (
      <JqxTooltip ref={this.myTooltip} 
        content={'This is a jqxButton'} position={'mouse'}>
        <JqxButton :width="500">Hover to see the tooltip</JqxButton>
      </JqxTooltip>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Opens the tooltip.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTooltip, { ITooltipProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtooltip';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, ITooltipProps> {
  private myTooltip = React.createRef<JqxTooltip>();
 
  public componentDidMount(): void {
    this.myTooltip.current!.open();
  }
   
  
  public render() {
    return (
      <JqxTooltip ref={this.myTooltip} 
        content={'This is a jqxButton'} position={'mouse'}>
        <JqxButton :width="500">Hover to see the tooltip</JqxButton>
      </JqxTooltip>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Refreshes the tooltip.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTooltip, { ITooltipProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtooltip';
import JqxButton, { IButtonProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
 
class App extends React.PureComponent<{}, ITooltipProps> {
  private myTooltip = React.createRef<JqxTooltip>();
 
  public componentDidMount(): void {
    this.myTooltip.current!.refresh();
  }
   
  
  public render() {
    return (
      <JqxTooltip ref={this.myTooltip} 
        content={'This is a jqxButton'} position={'mouse'}>
        <JqxButton :width="500">Hover to see the tooltip</JqxButton>
      </JqxTooltip>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);