## Properties

Name | Type | Default
--- | --- | ---
arrowOffsetValue | Number | 0

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

Try it: arrowOffsetValue is set to 10

animationOpenDelay | String/Number | 'fast'

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

Try it: animationOpenDelay is set to 100

animationCloseDelay | String/Number | 'fast'

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

Try it: animationCloseDelay is set to 50

autoClose | Boolean | true

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

Try it: autoClose is set to true

animationType | String | 'none'

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

Try it: animationType is set to 'fade'

height | Number/String | null

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

Try it: height is set to 50

initContent | String | null

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

Try it: initContent is set to 'function(){...}'

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.

#### Code examples

Set the `isModal` property.

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

Get the `isModal` property.

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

Try it: isModal is set to true

offset | Object | null

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

Try it: offset is set to {left: 10, top: 10}

position | String | 'left'

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

Try it: position is set to 'left'

rtl | Boolean | false

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

Try it: rtl is set to true

selector | Id/jQuery Selector | null

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

Try it: selector is set to $("#button")

showArrow | Boolean | true

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

Try it: showArrow is set to true

showCloseButton | Boolean | false

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

Try it: showCloseButton is set to true

width | Number/String | null

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

Try it: width is set to 200

title | String | ""

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

Try it: title is set to "Title"

theme | String | ''

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

Try it: theme is set to 'arctic'

## Events

close | Event |

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

Try it: Bind to the close event by type: jqxPopover.

open | Event |

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

Try it: Bind to the open event by type: jqxPopover.

## Methods

close | Method |

Closes the popover.

Parameter | Type | Description
--- | --- | ---
None |  |

Return Value
None

#### Code examples

Invoke the `close` method.

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

Try it: closes the popover

destroy | Method |

Destroy the widget.

Parameter | Type | Description
--- | --- | ---
None |  |

Return Value
None

#### Code examples

Invoke the `destroy` method.

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

Try it: destroy the widget

open | Method |

Open the popover.

Parameter | Type | Description
--- | --- | ---
None |  |

Return Value
None

#### Code examples

Invoke the `open` method.

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

Try it: opens the widget