1. jQuery plugin: Tooltip
Replacing standard tooltips is easy: Just include the script on the page, add a stylesheet, select the elements to tooltip and call the tooltip plugin.
2. qTip Jquery Plugin
qTip is an advanced tooltip plugin for the ever popular jQuery JavaScript framework. Built from the ground up to be user friendly, yet feature rich, qTip provides you with tonnes of features like rounded corners and speech bubble tips, and best of all… it’s completely free under the MIT license!
3. jQuery TOOLS – Tooltips done right
This tool has all the features and configuration options you’ll possibly need, such as effect and a plugin framework, scripting API and an event model. A smaller codebase is easier to control and results in snappier behaviour. Without gzipping the size is 3.5 Kb.
4. jQuery (mb)Tooltip 1.6
Now you can replace the ugly default tooltip with this smart and nice one!
5. jQuery plugin EZPZ Tooltip
- Clean and semantic HTML. This tooltip does not rely on putting a bunch of crap in the title attribute. The content is defined in its own HTML element.
- Convention over configuration. The content element is inferred from the name of the target element.
- Flexible appearance. Since the elements are just plain old HTML, they are styled by using CSS. If you want stems or rounded corners, just give the content element a background image.
- Flexible content positioning. The position of the content can be customized by specifying one of the built in positions, but if you’re feeling ambitious you can write your own positioning algorithm if you need something more customized.
- Simple and lightweight. This tooltip doesn’t try to do everything for you, but if you want it to do something you can make it happen.
- Custom effects. fadeIn and fadeOut (or any other effect) can be achieved by defining the showContent and hideContent callbacks.
6. jQuery Horizontal Tooltips Menu Tutorials
As usual, it’s a good practise to use UL List for menu. For the menu images, you need to put the caption in the ALT attribute, because jQuery will look at the ALT for it.
7. tipsy – Facebook-style tooltip plugin for jQuery
Tipsy is a jQuery plugin for creating a Facebook-like tooltips effect based on an anchor tag’s title attribute.
8. clueTip: A jQuery Tooltip Plugin
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. If the element includes a title attribute, its text becomes the heading of the clueTip.
9. 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. These balloons are drawn dynamically using the canvas HTML 5 element, and options include corner radius, spike length and width, stroke width. The balloons can auto-position based on the most available area in the current display window or they can be positioned according to an array of preferences (just left or right for instance).
10. Hovertips – easy and elegant tooltips
The hovertip plugin is quite flexible. With a little javascript, you can customize which nodes become the tooltips and which targets activate them. As a little demonstration, I’ve abbreviated all the comments below. To read the comments, click on the titles and the text will expand. Its using the same engine that drives the clicktips above. If the comments have the ‘new’ tag next to them, I don’t collapse them. Something like this would be handy for returning to long threads and quickly seeing only the posts you haven’t seen before. All the necessary javascript is embedded in this post. So this is the only page on my site with this behavior.
11. BetterTip Created By Edgar Verle
To use BetterTip you first have to obtain the jQuery Library. Next you’ll need to Download BetterTip. This download contains a compressed version of BetterTip as well as an uncompressed version. It also contains all the images and a css file. The compressed version with the images and css is 10.4KB and the uncompressed version is 12.4KB.
12. jQuery Ajax Tooltip
This is very much based on the Coda Popup Bubble example for jQuery that’s been going around with a few important differences:
- The information is requested via AJAX, so you don’t have to include all of this extra information in a hidden div. This keeps your markup smaller for grids with tons of names in it.
- When you mouse over another name, the previous one will disappear. If you tried this with the original Coda example, you’d end up with a weird streaking animation since there’s a delay before the div is hidden.
- Works in IE (just turned off the fade animation)
13. Build a Better Tooltip with jQuery Awesomeness
Browsers will automatically display a tooltip when you provide a title attribute. Internet Explorer will also use the alt attribute. But, in this tutorial I’m going to show you how to quickly write a jQuery plugin that will replace the typical browser tooltip with something a little flashier.
One of the great tools we have in our web development goodie-bag are tooltips. A tooltip is a box that appears when you hover your cursor over an element like a hyperlink. It provides supplementary information about that element. For example, a link with little or no text (an icon) may become confusing. Provide an extra sentence or two within a tooltip to explain to your users what will happen if they click on it.
14. Prototip2
Prototip allows you to easily create both simple and complex tooltips using the Prototype javascript framework.
- Style: Easy to customize.
- Position: Complete control over tooltip positions.
- Round: Configurable rounded corners, no PNG images required.
- Speech bubble effect!
- Works on all modern browsers.
15. Coda Popup Bubbles
Coda is one of the new web development tools for the Mac – and it’s popular amongst designers and developers I know. Panic (the developers of Coda) are also known for their sharp design.
16. TipTip jQuery Plugin
This plugin is yet another product from my development work on Build It With Me. I wanted a sweet & simple custom tooltip, but nothing I found seemed to be smart enough for what I needed. I needed a custom tooltip that behaved just like the browser tooltip, and that is exactly what TipTip does!
TipTip detects the edges of the browser window and will make sure the tooltip stays within the current window size. As a result the tooltip will adjust itself to be displayed above, below, to the left or to the right of the element with TipTip applied to it, depending on what is necessary to stay within the browser window.
TipTip is a very lightweight and intelligent custom tooltip jQuery plugin. It uses ZERO images and is completely customizable via CSS. It’s also only 3.5kb
17. Vertigo Project: vTip
vTip is designed to quickly provide very lightweight (706b js, 272b CSS, 270b image) tooltips to users of jQuery. The zip includes everything you need (including an example page), as well as jQuery for the examples to work. Using the jQuery framwork any element with a class of vtip will have it’s title attribute turned into a sleek, customizable tooltip without the klunk and loading time of a large tooltip script.
18. jGrowl
jGrowl is a jQuery plugin that raises unobtrusive messages within the browser, similar to the way that OS X’s Growl Framework works.
19. Create a Digg-style post sharing tool with jQuery
20. Easiest Tooltip and Image Preview Using jQuery
What this script does is adds an element to the body when you roll over a certain object. That element’s appearance is predefined with css (positioned absolute and styled) so all we need to do is fill the element with content, calculate mouse position and make it move accordingly. When cursor is moved over he object, element moves with it and when cursor roll out, the element is deleted.
21. BsTip
With easy HTML that’s how.
The set up offers endless configurablity. User your own css and tags (as long as you don’t use the “q” tag anywhere) to style your tab panel. It’s easy to do, easy to set up, easy to style because Tab World does all the hard work.
The basic setup is a ul with a specific ID – IT HAS TO BE AN ID – You don’t want two tabs duplicating – If you do… your not so good at this stuff — anyway, then your li tags and then your q tags. IMPORTANT! After that long sentence it is important that you understand, everything not in that q tag will be the tag title, while everything inside of it will be the content. Don’t use q tags in your actual content other than to wrap it because it is a) bad practice anyway and b) it won’t even show up. That may change in later versions but its not a really good idea.
— If you know any other Jquery Tooltip plugin then please let me know.
