10 Awesome jQuery ToolTips

We have gathered another set of 10 Cool jQuery Tooltip plugins that you may or may not have seen before. This set has some simple yet effective tooltip options which are easy to implement for your site. Enjoy!

10 jQuery Tooltip Plugins and Tutorials

1. Pop!

Enjoy simple dropdown menus with pop! an unobtrusive JavaScript plugin for jQuery.

Source

2. BetterTip

A plugin for the JQuery library that allows you to create custom tool tips.

3. EZPZ Tooltip

Very simple tooltip with border around it, it also follows your mouse.

4. BsTip

Various simple tooltips with fade in and fade out transition effects and border around them.

Source

5. clueTip

Allows you to easily show a fancy tooltip when the user s mouse hovers over on any element you designate in your script.

Source

6. Inline HTML Tooltip

Lets you define rich HTML tooltips that are embedded directly inside your webpage and that appear when the mouse rolls over links on your page.

Source

7. Input Floating Hint Box

Interesting tooltip with rounded corners for input fields. Tooltip fades in when you click on the input field and fades out when you click somewhere else.

Source

8. Orbital Toolti

With the Orbital Tooltip you can choose to position the tooltip on any object in 360 degrees around it. With multiple options for spacing & offset as well as styling, Orbital Tooltip stands head and shoulders above other jQuery tooltips.

9. jGrowl Tooltips

A jQuery plugin that raises unobtrusive messages within the browser, similar to the way that OS X s Growl Framework works.

10. vTip

Using the jQuery framwork any element with a class of vtip will have its title attribute turned into a sleek, customizable tooltip without the klunk and loading time of a large tooltip script.

Source

Frequently Asked Questions about jQuery Tooltips

How can I customize the appearance of my jQuery tooltip?

Customizing the appearance of your jQuery tooltip can be done through CSS. You can modify the tooltip’s color, size, border, and more. For instance, if you want to change the background color, you can use the following code:

.ui-tooltip {
background: #f6f6f6;
}
Remember to replace ‘#f6f6f6’ with the color of your choice. You can also add other CSS properties to further customize your tooltip.

Can I use HTML content inside my jQuery tooltip?

Yes, you can use HTML content inside your jQuery tooltip. This can be done by setting the ‘content’ option to a function that returns the HTML you want to display. Here’s an example:

$( ".selector" ).tooltip({
content: function() {
return "<strong>This is a bold tooltip!</strong>";
}
});
In this example, the tooltip will display the text “This is a bold tooltip!” in bold.

How can I display a tooltip on click instead of hover?

By default, jQuery tooltips are displayed when the user hovers over the element. However, you can change this behavior to display the tooltip on click. This can be done by using the ‘event’ option. Here’s an example:

$( ".selector" ).tooltip({
show: { event: "click" }
});
In this example, the tooltip will be displayed when the user clicks on the element.

How can I add animation to my jQuery tooltip?

jQuery tooltips support various animations. You can add animation to your tooltip by using the ‘show’ and ‘hide’ options. Here’s an example:

$( ".selector" ).tooltip({
show: { effect: "slideDown", duration: 800 },
hide: { effect: "explode", duration: 800 }
});
In this example, the tooltip will slide down when it’s shown and explode when it’s hidden.

How can I position my jQuery tooltip?

You can position your jQuery tooltip by using the ‘position’ option. This option allows you to specify where the tooltip should be displayed relative to the element. Here’s an example:

$( ".selector" ).tooltip({
position: { my: "left top", at: "right+10 top-5" }
});
In this example, the tooltip will be displayed 10 pixels to the right and 5 pixels above the top left corner of the element.

How can I add a delay to my jQuery tooltip?

You can add a delay to your jQuery tooltip by using the ‘delay’ option. This option allows you to specify how long the tooltip should wait before it’s displayed. Here’s an example:

$( ".selector" ).tooltip({
show: { delay: 500 }
});
In this example, the tooltip will wait for 500 milliseconds before it’s displayed.

How can I disable my jQuery tooltip?

You can disable your jQuery tooltip by using the ‘disable’ method. This method allows you to prevent the tooltip from being displayed. Here’s an example:

$( ".selector" ).tooltip( "disable" );
In this example, the tooltip will not be displayed when the user hovers over or clicks on the element.

How can I use images in my jQuery tooltip?

You can use images in your jQuery tooltip by including an ‘img’ tag in the ‘content’ option. Here’s an example:

$( ".selector" ).tooltip({
content: function() {
return "<img src='image.jpg' alt='Tooltip image'>";
}
});
In this example, the tooltip will display the image specified in the ‘src’ attribute.

How can I use jQuery tooltip with AJAX?

You can use jQuery tooltip with AJAX by setting the ‘content’ option to a function that returns an AJAX request. Here’s an example:

$( ".selector" ).tooltip({
content: function() {
var element = $( this );
return $.ajax({
url: "tooltip-content.php",
data: { id: element.attr("id") },
dataType: "html"
});
}
});
In this example, the tooltip will display the content returned by the AJAX request.

How can I destroy my jQuery tooltip?

You can destroy your jQuery tooltip by using the ‘destroy’ method. This method allows you to remove the tooltip functionality from the element. Here’s an example:

$( ".selector" ).tooltip( "destroy" );
In this example, the tooltip functionality will be removed from the element.