| Name | Type | Default |
|---|
|
arrowOffsetValue
# |
number
|
0
|
Sets or gets the arrow's offset from its default position.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPopover from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpopover';
function App() {
const myPopover = useRef<JqxPopover>(null);
return (
<div>
<button style={{ marginLeft: '50px' }} id="button">
Click me
</button>
<JqxPopover
ref={myPopover}
title={'Title'}
selector={'#button'}
showCloseButton={true}
arrowOffsetValue={50}
>
<div>Popover content</div>
</JqxPopover>
</div>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
animationOpenDelay
# |
number | string
|
'fast'
|
The time for showing of the widget.
Possible Values:
'fast'
'slow'
time in milliseconds e.g. 1000
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPopover from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpopover';
function App() {
const myPopover = useRef<JqxPopover>(null);
return (
<div>
<button style={{ marginLeft: '50px' }} id="button">
Click me
</button>
<JqxPopover
ref={myPopover}
title={'Title'}
selector={'#button'}
showCloseButton={true}
animationOpenDelay={1000}
>
<div>Popover content</div>
</JqxPopover>
</div>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
animationCloseDelay
# |
number | string
|
'fast'
|
The time for showing of the widget.
Possible Values:
'fast'
'slow'
time in milliseconds e.g. 1000
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPopover from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpopover';
function App() {
const myPopover = useRef<JqxPopover>(null);
return (
<div>
<button style={{ marginLeft: '50px' }} id="button">
Click me
</button>
<JqxPopover
ref={myPopover}
title={'Title'}
selector={'#button'}
showCloseButton={true}
animationCloseDelay={1000}
>
<div>Popover content</div>
</JqxPopover>
</div>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
autoClose
# |
boolean
|
true
|
Sets or gets the closing of the widget after click outside of the popover.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPopover from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpopover';
function App() {
const myPopover = useRef<JqxPopover>(null);
return (
<div>
<button style={{ marginLeft: '50px' }} id="button">
Click me
</button>
<JqxPopover
ref={myPopover}
title={'Title'}
selector={'#button'}
showCloseButton={true}
autoClose={false}
>
<div>Popover content</div>
</JqxPopover>
</div>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
animationType
# |
PopoverAnimationType
|
'fade'
|
PopoverAnimationType: "none" | "fade"
Sets the type of animation.
Possible Values:
'none'
'fade'
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPopover from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpopover';
function App() {
const myPopover = useRef<JqxPopover>(null);
return (
<div>
<button style={{ marginLeft: '50px' }} id="button">
Click me
</button>
<JqxPopover
ref={myPopover}
title={'Title'}
selector={'#button'}
showCloseButton={true}
animationType={'none'}
>
<div>Popover content</div>
</JqxPopover>
</div>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
height
# |
number | string
|
null
|
Sets or gets the popover's height.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPopover from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpopover';
function App() {
const myPopover = useRef<JqxPopover>(null);
return (
<div>
<button style={{ marginLeft: '50px' }} id="button">
Click me
</button>
<JqxPopover
ref={myPopover}
title={'Title'}
selector={'#button'}
showCloseButton={true}
height={60}
>
<div>Popover content</div>
</JqxPopover>
</div>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
initContent
# |
() => void
|
null
|
Initializes the popover's content.
import { createRoot } from 'react-dom/client';
import { useMemo, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPopover, { type IPopoverProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpopover';
function App() {
const myPopover = useRef<JqxPopover>(null);
const initContent = useMemo<IPopoverProps['initContent']>(
() => (): any => {
alert('Init content is called!');
},
[]
);
return (
<div>
<button style={{ marginLeft: '50px' }} id="button">
Click me
</button>
<JqxPopover
ref={myPopover}
title={'Title'}
selector={'#button'}
showCloseButton={true}
initContent={initContent}
>
<div>Popover content</div>
</JqxPopover>
</div>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
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.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPopover from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpopover';
function App() {
const myPopover = useRef<JqxPopover>(null);
return (
<div>
<button style={{ marginLeft: '50px' }} id="button">
Click me
</button>
<JqxPopover
ref={myPopover}
title={'Title'}
selector={'#button'}
showCloseButton={true}
isModal={true}
>
<div>Popover content</div>
</JqxPopover>
</div>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
offset
# |
any
|
null
|
Sets or gets the Popover's offset from its position.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPopover from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpopover';
function App() {
const myPopover = useRef<JqxPopover>(null);
return (
<div>
<button style={{ marginLeft: '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>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
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'
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPopover from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpopover';
function App() {
const myPopover = useRef<JqxPopover>(null);
return (
<div>
<button style={{ marginLeft: '50px' }} id="button">
Click me
</button>
<JqxPopover
ref={myPopover}
title={'Title'}
selector={'#button'}
showCloseButton={true}
position={'right'}
>
<div>Popover content</div>
</JqxPopover>
</div>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
rtl
# |
boolean
|
false
|
Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPopover from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpopover';
function App() {
const myPopover = useRef<JqxPopover>(null);
return (
<div>
<button style={{ marginLeft: '50px' }} id="button">
Click me
</button>
<JqxPopover
ref={myPopover}
title={'Title'}
selector={'#button'}
showCloseButton={true}
rtl={true}
>
<div>Popover content</div>
</JqxPopover>
</div>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
selector
# |
string
|
null
|
Sets or gets the Popover's selector. The selector is the element where the Popover is displayed.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPopover from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpopover';
function App() {
const myPopover = useRef<JqxPopover>(null);
return (
<div>
<button style={{ marginLeft: '50px' }} id="button">
Click me
</button>
<JqxPopover ref={myPopover} title={'Title'} selector={'#button'} showCloseButton={true}>
<div>Popover content</div>
</JqxPopover>
</div>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
showArrow
# |
boolean
|
true
|
Sets or gets the displaying of the popover's arrow.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPopover from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpopover';
function App() {
const myPopover = useRef<JqxPopover>(null);
return (
<div>
<button style={{ marginLeft: '50px' }} id="button">
Click me
</button>
<JqxPopover
ref={myPopover}
title={'Title'}
selector={'#button'}
showCloseButton={true}
showArrow={false}
>
<div>Popover content</div>
</JqxPopover>
</div>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
showCloseButton
# |
boolean
|
false
|
Sets or gets whether the close button is displayed.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPopover from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpopover';
function App() {
const myPopover = useRef<JqxPopover>(null);
return (
<div>
<button style={{ marginLeft: '50px' }} id="button">
Click me
</button>
<JqxPopover ref={myPopover} title={'Title'} selector={'#button'} showCloseButton={true}>
<div>Popover content</div>
</JqxPopover>
</div>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
width
# |
number | string
|
null
|
Sets or gets the popover's width.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPopover from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpopover';
function App() {
const myPopover = useRef<JqxPopover>(null);
return (
<div>
<button style={{ marginLeft: '50px' }} id="button">
Click me
</button>
<JqxPopover
ref={myPopover}
title={'Title'}
selector={'#button'}
showCloseButton={true}
width={200}
>
<div>Popover content</div>
</JqxPopover>
</div>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
title
# |
string | number
|
""
|
Sets or gets the popover's title.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPopover from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpopover';
function App() {
const myPopover = useRef<JqxPopover>(null);
return (
<div>
<button style={{ marginLeft: '50px' }} id="button">
Click me
</button>
<JqxPopover ref={myPopover} title={'Title'} selector={'#button'} showCloseButton={true}>
<div>Popover content</div>
</JqxPopover>
</div>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
theme
# |
string
|
''
|
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPopover from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpopover';
function App() {
const myPopover = useRef<JqxPopover>(null);
return (
<div>
<button style={{ marginLeft: '50px' }} id="button">
Click me
</button>
<JqxPopover
ref={myPopover}
title={'Title'}
selector={'#button'}
showCloseButton={true}
theme={'material'}
>
<div>Popover content</div>
</JqxPopover>
</div>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
|
|
close
# |
Event
|
|
This event is triggered when the popover is closed.
Code examples #
Bind to the close event of jqxPopover.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPopover from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpopover';
function App() {
const myPopover = useRef<JqxPopover>(null);
return (
<div>
<button style={{ marginLeft: '50px' }} id="button">
Click me
</button>
<JqxPopover ref={myPopover} title={'Title'} selector={'#button'} showCloseButton={true}>
<div>Popover content</div>
</JqxPopover>
</div>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
open
# |
Event
|
|
This event is triggered when the popover is opened.
Code examples #
Bind to the open event of jqxPopover.
import { createRoot } from 'react-dom/client';
import { useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPopover from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpopover';
function App() {
const myPopover = useRef<JqxPopover>(null);
return (
<div>
<button style={{ marginLeft: '50px' }} id="button">
Click me
</button>
<JqxPopover ref={myPopover} title={'Title'} selector={'#button'} showCloseButton={true}>
<div>Popover content</div>
</JqxPopover>
</div>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
|
| Name | Arguments | Return Type |
|---|
|
close
# |
None
|
|
|
|
|
destroy
# |
None
|
|
Destroy the widget.
import { createRoot } from 'react-dom/client';
import { useEffect, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPopover from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpopover';
function App() {
const myPopover = useRef<JqxPopover>(null);
useEffect(() => {
myPopover.current!.destroy();
}, []);
return (
<div>
<button style={{ marginLeft: '50px' }} id="button">
Click me
</button>
<JqxPopover ref={myPopover} title={'Title'} selector={'#button'} showCloseButton={true}>
<div>Popover content</div>
</JqxPopover>
</div>
);
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
open
# |
None
|
|
|
|
