Advertisement
Tooltip is a good way to show extra information when user hovers the cursor over an element. The “hover box” will appear when the mouse hover in, and disappear when the mouse hover out.
If the tooltip is being used appropriately, it can improve our site’s user friendly level, and also save us a lot of spaces. Today, we are going to see 15 jQuery plugins to create an user friendly tooltip.
1. qTip
qTip is an advance tooltip plugin which provides tonnes of features like rounded corners and speech bubble tips.
2. jQuery Tools/Tooltips
This tooltip plugin can contains any HTML element such as links, table, forms, and images. Implementing this plugin is very easy. The default effects are sliceup and toogle. However, you can easily build your own effects.
3. Simpletip
Simpletip allows you to create tooltips with ease on any element on the page using the power of jQuery’s selectors and event management. The tooltips can be static, dynamic, or even loaded through AJAX with a variety of different visual effects.
4. jQuery (mb)Tooltip
jQuery (mb)Tooltip is a beautiful alternative tooltip which is depended on jQuery timers and dropshadow plugins. It has a lot of options for different needs.
5. EZPZ Tooltip
It is flexible enough to customize the look and feel without requiring the bloat of any CSS or images. Hover targets should be mapped to their content counterparts by convention.
6. jQuery Input Floating Hint Box
It provides an automatic box hint in the right side of an input, when focus on that input, and disappear when focus go (blur).
7. HTML Tooltip
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. The tooltip appears directly beneath the anchor link, and adjusts its position dynamically based on whether the mouse is too close to the window’s edges.
8. Orbital Tooltip
With the Orbital Tooltip you can choose to position the tooltip on any object in a 360 degrees around it.
9. Tipsy
Tipsy is a jQuery for creating a Facebook-like tooltips effect based on an anchor tag’s title attribute.
10. clueTip
The clueTip plugin allows you to easily show a fancy tooltip when the user’s mouse hovers over (or, optionally, clicks on) any element you designate in your script.
11. jTip
jTip pulls content into a tool tip using the HttpXMLRequest object. By adding a class attribute value of “jTip” to a link element you can create a tooltip from the content found in the file the href is pointing too.
12. BeautyTips
BeautyTips is a simple-to-use balloon-help style tootip plugin. Any element on the page can be set to show a talk-balloon containing any text or HTML on hover, click, or any bindable event.
13. Hovertips
The hovertip plugin is quite flexible. With a little javascript, you can customize which nodes become the tooltips and which targets activate them.
14. BetterTip
BetterTip is a plugin for the JQuery library that allows you to create custom tool tips. It is based on Cody Lindley’s jTip, but it is much more flexible.
15. jqTooltip
The jQuery Tooltip Plugin allows you to easily create tooltips with ajax content.
Thanks for including qTip in your line-up! Always a pleasure to see your work up their in the ranks, especially first!
If you need any support make sure to checkout the website forums or drop me a line.
Hi Craig,
both your qTip and Simpletip are awesome! I’ll find a chance and use it in my project. If you have any great tool/plugin, do let me know and i will try to include in my future post.
Catch readers’ attention with these friendly tooltips
Great list, thanks!
Grammar police: “a User Friendly”
http://owl.english.purdue.edu/owl/resource/540/01/
hi mb,
Thanks for pointing out my grammar mistake.
why not fix it then?
Sorry a bit busy yesterday. But i had fixed it.
thans for this link
Awesome post again mate keep it up!!
OMgosh dude, those are some cool tools for sure!
RT
http://www.anon-tools.tk
Great Post!
Theres a cool ToolTip script at http://ajaxden.net/tag/tooltip/
Thanks barry, the script is cool. I should create another post and list all cool tooltip scripts which are not using jQuery.
Bookmarked!!
Thanks for posting this. Jquery is a great add-on, and tooltips can improve users’ experiences.
I want to add any of these mentioned above as a plugin to my wordress 2.7.1 installation. is there a way to do so? it’s gonna be a real hassle to manually add the plugins, configure etc etc
Hi GimliGlider,
I am not aware of such plugin. Do you search through Wordpress plugin database?
vtip, is another one.
http://www.vertigo-project.com/projects/vtip
i have used it and works pretty well.
Hi Paul,
Thanks for sharing this great plugin!
thank for sharing. My tooltip is here–> http://www.bitlimakina.com/baloncu-geldi
Hi bitlimakina,
you have a great tooltip, but do you have any English version of your page, so that we can read your documentation?
jQuery can provide some clickable tooltips with some nifty animation, but how many of these degrade “nicely” if javascripting is disabled?
Alternatively, why rely on javascript at all for a tool-tip.
Consider popINFO – a pure-CSS tooltip method.
Cheers.
Hi stk,
popINFO is a cool tooltip, thanks for sharing!
Dicky – Thanks for saying & you’re welcome.
Nice thank you for shared…
and this is why jquery is superior
this jquery plugin is very easy create popup
jQPOOOP the web is http://www.dieroboter.com/jQPOOOP
Great article, adding it to my bookmarks!
Check out this very simple tooltip also, it can show you content from another file as well as us id tag to save link data, it also support images so that you can also show images on you tooltip, and it moves with mouse pointer.
http://intekhabrizvi.wordpress.com/2010/01/21/jquery-very-simple-tooltip-plugin-ajax-enabled-2/