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

Code examples

Set the arrowOffsetValue property.

$('#jqxPopover').jqxPopover({arrowOffsetValue: 10});

Get the arrowOffsetValue property.

var arrowOffsetValue = $('#jqxPopover').jqxPopover('arrowOffsetValue'); 

The time for showing of the widget.

Possible Values:

'fast'

'slow'

time in milliseconds e.g. 1000

Code examples

Set the animationOpenDelay property.

$('#jqxPopover').jqxPopover({animationOpenDelay: 'slow'});

Get the animationOpenDelay property.

var animationOpenDelay = $('#jqxPopover').jqxPopover('animationOpenDelay'); 

The time for showing of the widget.

Possible Values:

'fast'

'slow'

time in milliseconds e.g. 1000

Code examples

Set the animationCloseDelay property.

$('#jqxPopover').jqxPopover({ animationCloseDelay:'fast'}); 

Get the animationCloseDelay property.

var animationCloseDelay = $('#jqxPopover').jqxPopover('animationCloseDelay'); 

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

Code examples

Set the autoClose property.

$('#jqxPopover').jqxPopover({ autoClose: true }); 

Get the autoClose property.

var autoClose = $('#jqxPopover').jqxPopover('autoClose'); 

Sets the type of animation.

Possible Values:

'none'

'fade'

Code example

Set the animationType property.

$('#jqxPopover').jqxPopover({animationType : 'fade'}); 

Get the animationType property.

var animationType = $('#jqxPopover').jqxPopover('animationType'); 

Sets or gets the popover's height.

Code examples

Set the height property.

$('#jqxPopover').jqxPopover({height:50});

Get the height property.

var height = $('#jqxPopover').jqxPopover('height');

Initializes the popover's content.

Code examples

Set the initContent property.

$('#jqxPopover').jqxPopover({ initContent: function(){ // Some code here. } }); 

Get the initContent property.

var initContent = $('#jqxPopover').jqxPopover('initContent'); 

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.

Code examples

Set the isModal property.

$('#jqxPopover').jqxPopover({ isModal: true }); 

Get the isModal property.

var isModal = $('#jqxPopover').jqxPopover('isModal'); 

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

Code example

Set the offset property.

$('#jqxPopover').jqxPopover({offset : {left: 10, top: 10}}); 

Get the offset property.

var offset = $('#jqxPopover').jqxPopover('offset'); 

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'

Code examples

Set the position property.

$('#jqxPopover').jqxPopover({position: "left"});

Get the position property.

var position = $('#jqxPopover').jqxPopover('position'); 

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

Code example

Set the rtl property.

$('#jqxPopover').jqxPopover({rtl : true}); 

Get the rtl property.

var rtl = $('#jqxPopover').jqxPopover('rtl'); 

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

Code examples

Set the selector property.

$('#jqxPopover').jqxPopover({ selector: "id1" }); 

Get the showArrow property.

var selector = $('#jqxPopover').jqxPopover('selector'); 

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

Code examples

Set the showArrow property.

$('#jqxPopover').jqxPopover({ showArrow: true }); 

Get the showArrow property.

var showArrow = $('#jqxPopover').jqxPopover('showArrow'); 

Sets or gets whether the close button is displayed.

Code examples

Set the showCloseButton property.

$('#jqxPopover').jqxPopover({ showCloseButton: true }); 

Get the showCloseButton property.

var showCloseButton = $('#jqxPopover').jqxPopover('showCloseButton'); 

Sets or gets the popover's width.

Code examples

Set the width property.

$('#jqxPopover').jqxPopover({width:50});

Get the width property.

var width = $('#jqxPopover').jqxPopover('width');

Sets or gets the popover's title.

Code examples

Set the title property.

$('#jqxPopover').jqxPopover({title: "Title"});

Get the title property.

var title = $('#jqxPopover').jqxPopover('title');

Sets the widget's theme.

jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file. In order to set a theme, you need to do the following:

• Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'energyblue' theme.

  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css"
                                      type="text/css" /> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.energyblue.css"
                                      type="text/css" /> 

• Set the widget's theme property to 'energyblue' when you initialize it.

  $('#jqxPopover').jqxPopover({ theme: "energyblue" });

This event is triggered when the popover is closed.

Code examples

Bind to the close event by type: jqxPopover.

$('#jqxPopover').on('close', function () { // Some code here. }); 

This event is triggered when the popover is opened.

Code examples

Bind to the open event by type: jqxPopover.

$('#jqxPopover').on('open', function () { // Some code here. }); 

Closes the popover.

Code examples

Invoke the close method.

$('#jqxPopover').jqxPopover('close'); 

Destroy the widget.

Code examples

Invoke the destroy method.

$('#jqxPopover').jqxPopover('destroy'); 

Open the popover.

Code examples

Invoke the open method.

$('#jqxPopover').jqxPopover('open');