| Name | Type | Default |
|---|---|---|
| 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:/* 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:/* 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:/* 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:/* 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
/* 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
/* 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 |
||
| Name | Arguments | Return 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. |
||