jQuery Tooltip API Reference

Documentation

Every option, event and method of the jQuery Tooltip (jqxTooltip), 30 in all. Expand a member for its description and a code example, or filter the list by name.

jQuery Tooltip: Tooltip with positions, triggers, delays and HTML content.

Properties 22 Events 4 Methods 4

Getting started Styling and appearance

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.

const 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.

const 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.

const 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.

const 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.

const 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.

const 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.

const 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.

const 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.

const 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.

const 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.

const 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.

const 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.

const 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.

const 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.

const 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.

const 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.

const 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.

const 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.

const 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.

const 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.

const 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.

jQuery Tooltip API Reference

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 #