## 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