React UI Components Documentation

Sets or gets the arrow's offset from its default position.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPopover, { IPopoverProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpopover';
 
class App extends React.PureComponent<{}, IPopoverProps> {
  private myPopover = React.createRef<JqxPopover>();  
  
  public render() {
    return (
      <div>
            <button style="margin-left: 50px" id="button">Click me</button>
            <JqxPopover ref="myPopover" title={'Title'} selector={'#button'} showCloseButton={true} arrowOffsetValue={50}>
                  <div>Popover content</div>
            </JqxPopover>
      </div>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

The time for showing of the widget.

'fast'

'slow'

time in milliseconds e.g. 1000

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPopover, { IPopoverProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpopover';
 
class App extends React.PureComponent<{}, IPopoverProps> {
  private myPopover = React.createRef<JqxPopover>();  
  
  public render() {
    return (
      <div>
            <button style="margin-left: 50px" id="button">Click me</button>
            <JqxPopover ref="myPopover" title={'Title'} selector={'#button'} showCloseButton={true} animationOpenDelay={1000}>
                  <div>Popover content</div>
            </JqxPopover>
      </div>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

The time for showing of the widget.

'fast'

'slow'

time in milliseconds e.g. 1000

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPopover, { IPopoverProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpopover';
 
class App extends React.PureComponent<{}, IPopoverProps> {
  private myPopover = React.createRef<JqxPopover>();  
  
  public render() {
    return (
      <div>
            <button style="margin-left: 50px" id="button">Click me</button>
            <JqxPopover ref="myPopover" title={'Title'} selector={'#button'} showCloseButton={true} animationCloseDelay={1000}>
                  <div>Popover content</div>
            </JqxPopover>
      </div>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the closing of the widget after click outside of the popover.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPopover, { IPopoverProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpopover';
 
class App extends React.PureComponent<{}, IPopoverProps> {
  private myPopover = React.createRef<JqxPopover>();  
  
  public render() {
    return (
      <div>
            <button style="margin-left: 50px" id="button">Click me</button>
            <JqxPopover ref="myPopover" title={'Title'} selector={'#button'} showCloseButton={true} autoClose={false}>
                  <div>Popover content</div>
            </JqxPopover>
      </div>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets the type of animation.

'none'

'fade'

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPopover, { IPopoverProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpopover';
 
class App extends React.PureComponent<{}, IPopoverProps> {
  private myPopover = React.createRef<JqxPopover>();  
  
  public render() {
    return (
      <div>
            <button style="margin-left: 50px" id="button">Click me</button>
            <JqxPopover ref="myPopover" title={'Title'} selector={'#button'} showCloseButton={true} animationType={'none'}>
                  <div>Popover content</div>
            </JqxPopover>
      </div>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the popover's height.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPopover, { IPopoverProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpopover';
 
class App extends React.PureComponent<{}, IPopoverProps> {
  private myPopover = React.createRef<JqxPopover>();  
  
  public render() {
    return (
      <div>
            <button style="margin-left: 50px" id="button">Click me</button>
            <JqxPopover ref="myPopover" title={'Title'} selector={'#button'} showCloseButton={true} height={60}>
                  <div>Popover content</div>
            </JqxPopover>
      </div>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Initializes the popover's content.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPopover, { IPopoverProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpopover';
 
class App extends React.PureComponent<{}, IPopoverProps> {
  private myPopover = React.createRef<JqxPopover>();
 
  constructor(props: {}) {
    super(props);
    this.state = {
      initContent: (): any => {
        alert('Init content is called!');
      }
    }
  }  
  
  public render() {
    return (
      <div>
            <button style="margin-left: 50px" id="button">Click me</button>
            <JqxPopover ref="myPopover" title={'Title'} selector={'#button'} showCloseButton={true} initContent={this.state.initContent}>
                  <div>Popover content</div>
            </JqxPopover>
      </div>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the popover is displayed as a modal dialog. If the jqxPopover's mode is set to modal, the popover blocks user interaction with the underlying user interface.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPopover, { IPopoverProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpopover';
 
class App extends React.PureComponent<{}, IPopoverProps> {
  private myPopover = React.createRef<JqxPopover>();  
  
  public render() {
    return (
      <div>
            <button style="margin-left: 50px" id="button">Click me</button>
            <JqxPopover ref="myPopover" title={'Title'} selector={'#button'} showCloseButton={true} isModal={true}>
                  <div>Popover content</div>
            </JqxPopover>
      </div>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the Popover's offset from its position.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPopover, { IPopoverProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpopover';
 
class App extends React.PureComponent<{}, IPopoverProps> {
  private myPopover = React.createRef<JqxPopover>();  
  
  public render() {
    return (
      <div>
            <button style="margin-left: 50px" id="button">Click me</button>
            <JqxPopover ref="myPopover" title={'Title'} selector={'#button'} showCloseButton={true} offset={{left: 10, top: 10}}>
                  <div>Popover content</div>
            </JqxPopover>
      </div>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the position of the popover. The position presents the orientation of the popover compared to the selector element

'top'

'right'

'bottom'

'left'

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPopover, { IPopoverProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpopover';
 
class App extends React.PureComponent<{}, IPopoverProps> {
  private myPopover = React.createRef<JqxPopover>();  
  
  public render() {
    return (
      <div>
            <button style="margin-left: 50px" id="button">Click me</button>
            <JqxPopover ref="myPopover" title={'Title'} selector={'#button'} showCloseButton={true} position={'right'}>
                  <div>Popover content</div>
            </JqxPopover>
      </div>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPopover, { IPopoverProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpopover';
 
class App extends React.PureComponent<{}, IPopoverProps> {
  private myPopover = React.createRef<JqxPopover>();  
  
  public render() {
    return (
      <div>
            <button style="margin-left: 50px" id="button">Click me</button>
            <JqxPopover ref="myPopover" title={'Title'} selector={'#button'} showCloseButton={true} rtl={true}>
                  <div>Popover content</div>
            </JqxPopover>
      </div>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the Popover's selector. The selector is the element where the Popover is displayed.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPopover, { IPopoverProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpopover';
 
class App extends React.PureComponent<{}, IPopoverProps> {
  private myPopover = React.createRef<JqxPopover>();  
  
  public render() {
    return (
      <div>
            <button style="margin-left: 50px" id="button">Click me</button>
            <JqxPopover ref="myPopover" title={'Title'} selector={'#button'} showCloseButton={true}>
                  <div>Popover content</div>
            </JqxPopover>
      </div>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the displaying of the popover's arrow.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPopover, { IPopoverProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpopover';
 
class App extends React.PureComponent<{}, IPopoverProps> {
  private myPopover = React.createRef<JqxPopover>();  
  
  public render() {
    return (
      <div>
            <button style="margin-left: 50px" id="button">Click me</button>
            <JqxPopover ref="myPopover" title={'Title'} selector={'#button'} showCloseButton={true} showArrow={false}>
                  <div>Popover content</div>
            </JqxPopover>
      </div>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the close button is displayed.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPopover, { IPopoverProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpopover';
 
class App extends React.PureComponent<{}, IPopoverProps> {
  private myPopover = React.createRef<JqxPopover>();  
  
  public render() {
    return (
      <div>
            <button style="margin-left: 50px" id="button">Click me</button>
            <JqxPopover ref="myPopover" title={'Title'} selector={'#button'} showCloseButton={true}>
                  <div>Popover content</div>
            </JqxPopover>
      </div>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the popover's width.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPopover, { IPopoverProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpopover';
 
class App extends React.PureComponent<{}, IPopoverProps> {
  private myPopover = React.createRef<JqxPopover>();  
  
  public render() {
    return (
      <div>
            <button style="margin-left: 50px" id="button">Click me</button>
            <JqxPopover ref="myPopover" title={'Title'} selector={'#button'} showCloseButton={true} width={200}>
                  <div>Popover content</div>
            </JqxPopover>
      </div>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the popover's title.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPopover, { IPopoverProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpopover';
 
class App extends React.PureComponent<{}, IPopoverProps> {
  private myPopover = React.createRef<JqxPopover>();  
  
  public render() {
    return (
      <div>
            <button style="margin-left: 50px" id="button">Click me</button>
            <JqxPopover ref="myPopover" title={'Title'} selector={'#button'} showCloseButton={true}>
                  <div>Popover content</div>
            </JqxPopover>
      </div>
    );
  }
}
 
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 JqxPopover, { IPopoverProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpopover';
 
class App extends React.PureComponent<{}, IPopoverProps> {
  private myPopover = React.createRef<JqxPopover>();  
  
  public render() {
    return (
      <div>
            <button style="margin-left: 50px" id="button">Click me</button>
            <JqxPopover ref="myPopover" title={'Title'} selector={'#button'} showCloseButton={true} theme={'material'}>
                  <div>Popover content</div>
            </JqxPopover>
      </div>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the popover is closed.

Code examples

Bind to the close event of jqxPopover.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPopover, { IPopoverProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpopover';
 
class App extends React.PureComponent<{}, IPopoverProps> {
  private myPopover = React.createRef<JqxPopover>();  
  
  public render() {
    return (
      <div>
            <button style="margin-left: 50px" id="button">Click me</button>
            <JqxPopover ref="myPopover" title={'Title'} selector={'#button'} showCloseButton={true}>
                  <div>Popover content</div>
            </JqxPopover>
      </div>
    );
  }
 
  private onClose(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the popover is opened.

Code examples

Bind to the open event of jqxPopover.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPopover, { IPopoverProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpopover';
 
class App extends React.PureComponent<{}, IPopoverProps> {
  private myPopover = React.createRef<JqxPopover>();  
  
  public render() {
    return (
      <div>
            <button style="margin-left: 50px" id="button">Click me</button>
            <JqxPopover ref="myPopover" title={'Title'} selector={'#button'} showCloseButton={true}>
                  <div>Popover content</div>
            </JqxPopover>
      </div>
    );
  }
 
  private onOpen(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Closes the popover.

Destroy the widget.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPopover, { IPopoverProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpopover';
 
class App extends React.PureComponent<{}, IPopoverProps> {
  private myPopover = React.createRef<JqxPopover>();
 
  public componentDidMount(): void {
    this.myPopover.current!.destroy();
  }
   
  
  public render() {
    return (
      <div>
            <button style="margin-left: 50px" id="button">Click me</button>
            <JqxPopover ref="myPopover" title={'Title'} selector={'#button'} showCloseButton={true}>
                  <div>Popover content</div>
            </JqxPopover>
      </div>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Open the popover.