Adding a Tooltip in jQuery

Tooltip widget is used to add tooltip using jQuery.Adding a Tooltip in jQuery is quite easy and there are options to customize it.

In HTML to display extra information about an element such as textbox ,title attribute is used.This value of the title attribute is displayed as a tooltip.Tooltip is a small box displayed when the mouse hover overs an element.

jQuery tooltip widget provides an alternative to the native tooltips in html.This is part of the jQuery UI library.It allows for customizing the tooltip unlike the native tooltip which can not be customized.

Adding tooltip to an element

To add the tooltip to an html element just call the tooltip() method.To attach a tooltip to an html element follow the below steps

1.Include the following scripts and css in the head element

<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

2. Declare the element to which you want to add the tooltip in the body.Below we have decalred a input element of type text.We have set its title attribute as “Title Text”.

<input type="text" id="tooltip1" title="Title Text"/>

3. Call the tooltip method on the HTML element.

<script>
$(function () {
$("#tooltip1").tooltip();
});
</script>

Above will display the following tooltip when mouse is hovered over the text element:

4. Set the options object to customize the tooltip.

The tooltip() method can be passed a javascript object to customize the tooltip.

$("#tooltip1").tooltip({ property: "value" });

Different properties can be passed to this method.Some of the useful properties are:

content This specifies the content of the tooltip.

$("#elementId").tooltip({ content: "This is custom tooltip implemented using jQuery UI library" });

disabled   Used to disable the tooltip.

$("#elementId").tooltip(disabled: true);

hide   Used for animating the hiding of tooltip.This can have the following values

• Boolean value ,true or false.If set to true the default animation settings are used.
• Number Specifies duration in which the tooltip fades.
• String  Specifies the inbuilt animation to use.
• Object Multiple animation properties can be provided.

Follow on: