jQuery Tooltip API

Name Type Default

absolutePositionX Number/String 0

Sets or gets the tooltip's horizontal position if the position property is set to 'absolute'.

Code examples

Set the absolutePositionX property.

$('#jqxTooltip').jqxTooltip({ absolutePositionX: 400 });

Get the absolutePositionX property.

var absolutePositionX = $('#jqxTooltip').jqxTooltip('absolutePositionX');

Try it: absolutePositionX is set to 10

absolutePositionY Number/String 0

Sets or gets the tooltip's vertical position if the position property is set to 'absolute'.

Code examples

Set the absolutePositionY property.

$('#jqxTooltip').jqxTooltip({ absolutePositionY: 0 });

Get the absolutePositionY property.

var absolutePositionY = $('#jqxTooltip').jqxTooltip('absolutePositionY');

Try it: absolutePositionY is set to 10

autoHide Boolean true

Sets or gets whether the tooltip will automatically hide after duration equal to the autoHideDelay property.

Code examples

Set the autoHide property.

$('#jqxTooltip').jqxTooltip({ autoHide: false });

Get the autoHide property.

var autoHide = $('#jqxTooltip').jqxTooltip('autoHide');

Try it: autoHide is set to false

autoHideDelay Number 3000

Sets or gets the duration after which the tooltip automatically hides (works only if the autoHide property is set to true). If autoHideDelay is set to 0, the tooltip hides only after the mouse has left the parent element.

Code examples

Set the autoHideDelay property.

$('#jqxTooltip').jqxTooltip({ autoHideDelay: 3000 });

Get the autoHideDelay property.

var autoHideDelay = $('#jqxTooltip').jqxTooltip('autoHideDelay');

Try it: autoHideDelay is set to 100

animationShowDelay Number/String 'fast'

Sets or gets the duration of the tooltip animation at show.

Code examples

Set the animationShowDelay property.

$('#jqxTooltip').jqxTooltip({ animationShowDelay: 250 });

Get the animationShowDelay property.

var animationShowDelay = $('#jqxTooltip').jqxTooltip('animationShowDelay');

Try it: animationShowDelay is set to 2000

animationHideDelay Number/String 'fast'

Sets or gets the duration of the tooltip animation at hide.

Code examples

Set the animationHideDelay property.

$('#jqxTooltip').jqxTooltip({ animationHideDelay: 250 });

Get the animationHideDelay property.

var animationHideDelay = $('#jqxTooltip').jqxTooltip('animationHideDelay');

Try it: animationHideDelay is set to 2000

content String ''

Sets or gets the content of jqxTooltip. It can be either plain text or HTML code.

Code examples

Set the content property.

$('#jqxTooltip').jqxTooltip({ content: 'This is a jqxTooltip.' });

Get the content property.

var content = $('#jqxTooltip').jqxTooltip('content');

Try it: content is set to 'This is a jqxButton.'

closeOnClick Boolean true

Sets or gets whether the tooltip will close if it is clicked.

Code examples

Set the closeOnClick property.

$('#jqxTooltip').jqxTooltip({ closeOnClick: false });

Get the closeOnClick property.

var closeOnClick = $('#jqxTooltip').jqxTooltip('closeOnClick');

Try it: closeOnClick is set to false

disabled Boolean false

Sets or gets whether the tooltip is disabled.

Code examples

Set the disabled property.

$('#jqxTooltip').jqxTooltip({ disabled: true });

Get the disabled property.

var disabled = $('#jqxTooltip').jqxTooltip('disabled');

Try it: disabled is set to true

enableBrowserBoundsDetection Boolean true

Sets or gets whether jqxTooltip will be hidden if it leaves the browser bounds or will be offset so that it is always within the browser's bounds and visible.

Code examples

Set the enableBrowserBoundsDetection property.

$('#jqxTooltip').jqxTooltip({ enableBrowserBoundsDetection: false });

Get the enableBrowserBoundsDetection property.

var enableBrowserBoundsDetection = $('#jqxTooltip').jqxTooltip('enableBrowserBoundsDetection');

Try it: enableBrowserBoundsDetection is set to true

height Number/String 'auto'

Sets or gets the height of jqxTooltip.

Code examples

Set the height property.

$('#jqxTooltip').jqxTooltip({ height: 200 });

Get the height property.

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

Try it: height is set to 30

left Number/String 0

Sets or gets the horizontal offset of jqxTooltip based on the position property.

Code examples

Set the left property.

$('#jqxTooltip').jqxTooltip({ left: 10 });

Get the left property.

var left = $('#jqxTooltip').jqxTooltip('left');

Try it: left is set to 100

name String ''

Sets or gets the name of the tooltip's group. Only one tooltip from a group can be shown at a time. By default, all tooltips are in a single group.

Code examples

Set the name property.

$('#jqxTooltip').jqxTooltip({ name: 'tooltipGroup1' });

Get the name property.

var name = $('#jqxTooltip').jqxTooltip('name');

Try it: name is set to 'tooltipGroup'

opacity Number 0.9

Sets or gets the tooltip's opacity.The value must be between 0 and 1.

Code examples

Set the opacity property.

$('#jqxTooltip').jqxTooltip({ opacity: 1 });

Get the opacity property.

var opacity = $('#jqxTooltip').jqxTooltip('opacity');

Try it: opacity is set to 0.5

position String 'default'

Sets or gets the position of jqxTooltip.

Possible Values:

'top' - the tooltip shows above the host element

'bottom' - the tooltip shows below the host element

'left' - the tooltip shows at the left of the host element

'right' - the tooltip shows at the right of the host element

'top-left' - the tooltip shows at the top-left side of the host element

'bottom-left' - the tooltip shows at the bottom-left side of the host element

'top-right' - the tooltip shows at the top-right side of the host element

'bottom-right' - the tooltip shows at the bottom-right side of the host element

'absolute' - the tooltip shows at an absolute position on screen, defined by the coordinate properties absolutePositionX and absolutePositionY

'mouse' - the tooltip shows after a short period of time at the position of the mouse cursor

'mouseenter' - the tooltip shows where the mouse cursor has entered the host element

'default' - the tooltip shows at the bottom-right side of the host element but does not make use of the left and top properties

Code examples

Set the position property.

$('#jqxTooltip').jqxTooltip({ position: 'top' });

Get the position property.

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

Try it: position is set to 'top'

rtl Boolean false

Sets or gets whether the jqxTooltip's right-to-left support is enabled.

Code examples

Set the rtl property.

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

Get the rtl property.

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

Try it: rtl is set to true

showDelay Number 100

Sets or gets the duration after which the tooltip will be shown.

Code examples

Set the showDelay property.

$('#jqxTooltip').jqxTooltip({ showDelay: 1000 });

Get the showDelay property.

var showDelay = $('#jqxTooltip').jqxTooltip('showDelay');

Try it: showDelay is set to 200

showArrow Boolean true

Sets or gets whether the tooltip's arrow will be shown.

Code examples

Set the showArrow property.

$('#jqxTooltip').jqxTooltip({ showArrow: false });

Get the showArrow property.

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

Try it: showArrow is set to false

top Number/String 0

Sets or gets the vertical offset of jqxTooltip based on the position property.

Code examples

Set the top property.

$('#jqxTooltip').jqxTooltip({ top: 10 });

Get the top property.

var top = $('#jqxTooltip').jqxTooltip('top');

Try it: top is set to 100

trigger String 'hover'

Sets or gets the way of triggering the tooltip.

Possible Values:

'hover' - the tooltip shows immeadiately after hovering over the host element.

'click' - the tooltip shows when the host element is clicked

Code examples

Set the trigger property.

$('#jqxTooltip').jqxTooltip({ trigger: 'click' });

Get the trigger property.

var trigger = $('#jqxTooltip').jqxTooltip('trigger');

Try it: trigger is set to 'click'

theme String ''

width Number/String 'auto'

Sets or gets the width of jqxTooltip.

Code examples

Set the width property.

$('#jqxTooltip').jqxTooltip({ width: 200 });

Get the width property.

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

Try it: width is set to 200

close Event

This event is triggered when the tooltip is closed (hidden).

Code examples

Bind to the close event by type: jqxTooltip.

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

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

closing Event

This event is triggered when the tooltip is closing.

Code examples

Bind to the closing event by type: jqxTooltip.

$('#jqxTooltip').bind('closing', function () { // Some code here. });

Try it: Bind to the closing event by type: jqxTooltip.

open Event

This event is triggered when the tooltip is opened (shown).

Code examples

Bind to the open event by type: jqxTooltip.

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

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

opening Event

This event is triggered when the tooltip is opening.

Code examples

Bind to the opening event by type: jqxTooltip.

$('#jqxTooltip').bind('opening', function () { // Some code here. });

Try it: Bind to the opening event by type: jqxTooltip.

close Method

Specifies a time before the tooltip closes. If it is not set, the tooltip closes immediately.

Parameter	Type	Description
index	Number

Return Value
None

Code examples

Invoke the close method.

// @param Number.
$('#jqxTooltip').jqxTooltip('close', 300);

Try it: closes the jqxTooltip.

destroy Method

Destroys the tooltip by removing it from the DOM.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the destroy method.

$("#jqxTooltip").jqxTooltip('destroy');

Try it: destroy the jqxTooltip.

open Method

Opens the tooltip.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the open method.

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

Try it: opens the jqxTooltip.

refresh Method

Refreshes the tooltip.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the refresh method.

$("#jqxTooltip").jqxTooltip('refresh');

Try it: refreshes the jqxTooltip.

Properties

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Events

Code examples

Code examples

Code examples

Code examples

Methods

Code examples

Code examples

Code examples

Code examples