Search within TutorialsPark

jQuery UI : Tooltips


Learn how to use jQuery UI Tooltips to provide context within a page.


jQuery UI : Tooltips

The jQuery UI Tooltips are used to provide context within the page, you may find them as spelling correctors or for providing hint while filling a form etc.

The tooltip provided by jQuery UI is very easily accessible, customizable as well as themeable. It can be trigger using various events like focus, hover, mouseover etc.


jQuery UI Tooltips : Implementing a Default Tooltip

The browser by default has a tooltip to display the value of title attribute, jQuery UI tooltips are a replacement for native tooltips, it gets the value of title attribute and automatically adds the necessary markups.

In the demo below, when the mouse pointer hovers over the link, the predefined ARIA is added to HTML markups.The widget generates the markup for the tooltip dynamically and appends it to the document.

Example: jQuery UI Menu Widget - Binding Events

Give it a TRY! » Note: The markups applied dynamically are removed automatically when the target element loses the focus


jQuery UI Tooltip : Framework CSS Classes

Table : jQuery UI Menu Events

Classname Description
ui-tooltip To style the outer container for the tooltip
ui-tooltip-content To style the content of the tooltip
ui-widget-content To apply the style for the container of the content and its child element, icons and links.
ui-corner-all To apply a corner-radius to all four corner of element

jQuery UI Tooltip : Override the Default Styles

jQuery UI tooltip widget come with prebuilt styles, but the user can override the default/existing style.

In the demo below, we add CSS styles to custom design the tooltip overriding the default value.

Example: jQuery UI Menu - Creating Horizontal Menu

Give it a TRY! » Note: Hover the pointer over the text to see the modified tooltip.


jQuery UI Tooltip : Configuring the Tooltip

The jQuery UI tooltip can configured to set the behaviour of the tooltip using a rich set of options for different components.

To configure these options a object literal or an object reference can be passed within the tooltip() widget method.

Table : jQuery UI Tooltip Configuration

Options Description
content To set the content of the tooltip.
disabled It is used to disable the tooltip. Default value is false
hide To determine or define the animation while hiding the tooltip. Default value is null.
items To set the selector that denotes which items would display tooltip.
position To identify the position of the tooltip relative to the target element associated.
show To define how to animate how to show the tooltip. Default value is null
tooltipClass To display different tooltips by adding classes to the widget. Default value is null
track To determine whether the tooltip should follow the mouse.The default value is false

jQuery UI Tooltip : Setting the Position of Tooltip

jQuery UI Tooltip Widget can be fine-tuned to define where the tooltip can appear on screen. At times tooltips can hide the main content, but you can position them using position attribute.

In the demo, we have used pseudo-selector to style out tooltip, also you need not use any images to style and create tooltip, simple CSS rules are sufficient.

Example: jQuery UI Menu - Setting the Position of Tooltip

Give it a TRY! » Note:Hover the mousepointer over the text to see the tooltip.


jQuery UI Tooltip : Tracking Mouse Movements

jQuery UI tooltip Widget can be made to track the movements of your mouse cursor and display the tooltip only when the mouse pointer is within the specified section of the webpage.

Example: jQuery UI Menu Tracking Mouse Movements

Give it a TRY! » Note: The tooltip will be displayed only when the mouse pointer hovers over the specified target element.


jQuery UI Tooltip: To display Only Certain Tooltips

jQuery UI Tooltip Widget's configuration using the options apply on all tooltips within the webpage. So , the problem is to apply configurations to only certain Elements.

In the demo, we have removed reference to the document, and then replace it with the id value of the textbox.

Example: jQuery UI Tooltip To Display only Certain Tooltips

Give it a TRY! » Note: The tooltip setting are applicable to only the specified element and not all tooltips


jQuery UI Tooltip: Using Tooltip Effects

jQuery UI Tooltip Widget's can be assigned different types of effect, the default being fade effect but the user has an option to customize the effect

In the demo below, we have set the effect value to bounce and explode and specified the duration of the animation.

Example: jQuery UI Menu Enhancing a Select Menu

Give it a TRY! » Note: Hover the mouse over the text to see the tooltip explide when the pointers


jQuery UI Tooltip: Tooltips using HTML

We are relying on jQuery to add CSS styles to tooltip which at times can be troublesome. But there is a way around this as well.

We can use HTML to generate our own tooltips, thus increasing but the customization as well as flexibility of Tooltip.

Example: jQuery UI Menu Enhancing a Select Menu

Give it a TRY! » Note: The tooltip is created using CSS style rules.