jQuery Tooltip Plugin with Examples

The Tooltip plugin of jQuery UI

The jQuery UI has a great plugin that will replace traditional and bored-looking, small-sized tooltips with highly customizable, nicely colored as you want, and larger font size with many other options.

The Tooltip is a way to inform users about current elements/features or tips for what they are interacting in a website.

For example, while filling in a password textbox, a tooltip appears to let them know what password limitations or requirements are. Similarly, a menu bar has a small piece of text, as the user brings the mouse over a menu item you can show a tooltip with large description and so on.

The plugin is called jQuery UI tooltip, which is the part of jQuery UI library. If you are using other components of UI library then include or refer the whole file. If using one or a few components like the tooltip, slider, dialog, etc. then just include a specific component and download a customized JS version of jQuery UI.

You can see the list of customizable components here: http://jqueryui.com/download/. That should help in the faster website as far as loading is concerned. Since this is becoming more and more ranking signal for SEO.

All it requires is to call the tooltip widget, after including the jQuery UI library in the script section, add some styles, and create tooltips by using a title attribute in e.g. hyperlinks, textboxes or other elements in your web document.

Now let us look at a few examples of using the tooltip plugin with codes.

A jQuery tooltip example in hyperlinks

In the following example, I will create tooltips by using jQuery UI tooltip plugin that will use ordinary tooltips in <a> tag. As you hover over the link it will show tooltips.

jquery tooltip

See online demo and code

The script:

<script>
$(function() {
$( document ).tooltip({
tooltipClass: "uitooltip"
});
});
</script>

The CSS

.uitooltip {
padding: 8px;
background:yellow;
position: absolute;
z-index: 9999;
max-width: 300px;
-webkit-box-shadow: 0 0 5px #aaa;
box-shadow: 0 0 5px #aaa;
}

The markup:

<div>This is a tooltip tutorial that uses <a href="http://jqueryui.com/" title="Official site of jQuqery UI">jQuery UI tooltip plugin</a><br />
Learn about Tooltip plugin method and options at <a href="http://api.jqueryui.com/tooltip/" title="jQuery Tooltip widget documentation">API documentation</a>
</div>

The example uses custom CSS which is the basic, though. In the following examples, you can see different styles of tooltips for other elements.

An example of tooltips in HTML forms

You can use the tooltip jQuery plugin in form elements as well.  In fact, this is quite useful to inform users what a  text box field’s purpose is, with a little more detail. For example, the password field simply tells users to enter the password. However, these days passwords generally require certain criteria to meet like passwords must be 8-24 characters long, must contain a number, a capital letter, and special characters etc.

Using a well-designed tooltip in each form field by using jQuery tooltip widget ahead of the element won’t be a bad idea. The following example shows how you can use it.

jquery tooltip form

See online demo and code

The jQuery code:

<script>
$(function() {
$( document ).tooltip({
tooltipClass: "uitooltip",
position: {
my: "left top",
at: "right+5 top-5"
}
});
});
</script>

 CSS for this example

.uitooltip {
padding: 8px;
background:#00D500;
position: absolute;
max-width: 300px;
-webkit-box-shadow: 0 0 5px #aaa;
box-shadow: 0 0 5px #aaa;
font-size: 13px;
white-space: pre-line;
border-radius: 10px;
}
label {
display: inline-block; width: 5em;
}

The HTML code for simple form displaying tooltips

<p>A Form example with Tooltip</p>
<div>
<label>Your Name</label>: <input id="name" title="Enter your full name"/></div>
<div><label>Email</label>: <input id="email" title="Enter your Email address"/></div>
<div><label>Password:</label>: <input id="password" title="Enter password that must be 
(i)6-24 characters long 
(ii)Must contain a number 
(iii)Must contain a capital letter"/></div>

As you can see, when you enter into any text field it will show a tooltip attached to it. When you enter into the password field it will show a tooltip with line-breaks. I used green colored and added some style; amend this as per the need.

In the script section tooltipClass: “uitooltip” is used to assign a CSS class to this tooltip widget that will override the default style. After that, the position option is used that will display the tooltip ahead of the text boxes. If not used it will display below text fields.

Tooltip example with display effects

To add more coolness to tooltips in jQuery UI widget, you can add different effects to display and close tooltips. You can use the show and hide options of the tooltip plugin that enable you to add different effects like blind, bounce, drop, fade, slideDown, explode, etc. You can add a delay as well to open or close slowly.

The following example demonstrates how you can add effect while opening or closing tooltips (as you bring the mouse over or take away) by using jQuery tooltip widget options.

jquery tooltip effect

See online demo and code

jQuery:

<script>
$(function() {
$( document ).tooltip({
tooltipClass: "uitooltip",
position: {
my: "left top",
at: "right+5 top-5"
},
show: {
effect: "slideDown",
},
hide: {
effect: "shake",
} 
});
});
</script>

 The CSS:

.uitooltip {
padding: 8px;
background:#B24926;
color:#fff;
position: absolute;
max-width: 300px;
-webkit-box-shadow: 0 0 5px #aaa;
box-shadow: 0 0 5px #aaa;
font-size: 13px;
white-space: pre-line;
border-radius: 10px;
}

The Markup:

<div>
<span title="Using effect in Tooltips">Just hover mouse over this span element!</span> 
</div>

In the above example, a span element is used to display the tooltip as the mouse is over it. As you bring the mouse over it, the tooltip will display with a slideDown effect. As you leave, it will disappear by shake effect. For the whole list of available effects supported go to this page: http://api.jqueryui.com/category/effects/

An example of moving/tracking tooltip

Your visitors may use the mouse to go through the content of the website. While you have tooltips for different elements, it may be useful to track or move tooltips as long as a user is in that element’s area. To learn more about what this actually is about, see an example by clicking the link below. Bring the mouse over the paragraph and move from start to end and see how the tooltip is moving.

jquery tooltip track

See online demo and code

The script:

<script>
$(function() {
$( document ).tooltip({
tooltipClass: "uitooltip",
track: true
});
});
</script>

The CSS:

.uitooltip {
padding: 8px;
background:#FAB000;
color:#000;
position: absolute;
-webkit-box-shadow: 0 0 5px #aaa;
box-shadow: 3px 3px 5px #aaa;
font-size: 11px;
border-radius: 5px;
}
p
{
border:1px solid black;
display:inline;
padding: 5px;
}

The markup:

<div>
<p title="The tooltip tracking mouse!">Bring mouse over this paragraph and move around it!</p> 
</div>

You can do this quite easily by using track option of jQuery UI tooltip plugin and using true as its value.

track: true

Tooltip with content option rather a title example

In the above examples, I used title attribute at the element level that is displayed as a tooltip. The jQuery tooltip plugin has an option called content that you can use instead of the title attribute. You can either use the title tag in an element or use items option in the script section and specify the selector there.

The great advantage of using the content option is you can use HTML/CSS to create a tooltip. That means the content of the tooltip is highly customizable.

The following example shows how you can use it:

jquery tooltip content

See online demo and code

The jQuery code:

<script>
$(function() {
$( document ).tooltip({
track: true,
content: 'Tooltip Help<div class="uitooltip">This is tooltip with content option: <br> <img style="padding:10px;" src="jquery.jpg"></div>',
items: '#tooltip_ex'
});
});
</script>

CSS for this demo

.uitooltip {
padding: 2px;
background:#FFF;
color:#000;
position: absolute;
-webkit-box-shadow: 0 0 5px #aaa;
box-shadow: 3px 3px 5px #aaa;
font-size: 15px;
border-radius: 5px;

}
.uitooltipheading {
padding: 0px;
background:#9EEFEE;
color:#000;
width:200px;
position: absolute;
-webkit-box-shadow: 0 0 5px #aaa;
box-shadow: 3px 3px 5px #aaa;
font-size: 18px;
border-radius: 5px;
}
p
{
border:1px solid black;
display:inline;
padding: 5px;
}

Markup:

<div>
<p id="tooltip_ex">Bring mouse over this paragraph and move around it!</p> 
</div>

As you can see the demo includes a tooltip header, then some text in a div element and an image inside. You can style each section separately. Similarly, you can include other elements inside tooltips.