Properties

NameTypeDefault
arrowOffsetValue number 0

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);
animationOpenDelay number | string 'fast'

The time for showing of the widget.

Possible Values: 
'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);
animationCloseDelay number | string 'fast'

The time for showing of the widget.

Possible Values: 
'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);
autoClose boolean true

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);
animationType PopoverAnimationType 'fade'
PopoverAnimationType: "none" | "fade"

Sets the type of animation.

Possible Values: 
'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);
height number | string null

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);
initContent () => void null

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);
isModal boolean false

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);
offset any null

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);
position PopoverPosition 'left'
PopoverPosition: "top" | "bottom" | "left" | "right"

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

Possible Values: 
'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);
rtl boolean false

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);
selector string null

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);
showArrow boolean true

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);
showCloseButton boolean false

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);
width number | string null

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);
title string | number ""

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);
theme string '' 
/* 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);

Events

close Event

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);
open Event

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);

Methods

NameArgumentsReturn Type
close None

Closes the popover.

destroy None

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 None

Open the popover.