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

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

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Opens the tooltip.

Code examples

Invoke the open method.

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

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

Code examples

Invoke the close method.

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

Refreshes the tooltip.

Code examples

Invoke the refresh method.

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

Destroys the tooltip by removing it from the DOM.

Code examples

Invoke the destroy method.

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