Smashing Magazine - we smash you with the information that will make your life easier. really.

Thanks!

I prefere CSS based solution :)

Once again great article! Thanks

True collection of tooltips…..Crazy well done…

Nice!
CSS RoX!

The tooltips are in your base already, killing your dudes!

I personally do not prefer such overly elaborate tooltips. They are ok if they are toned down and only applied where it counts, like when you really doubt a user’s ability of handling text areas.

The best one is from nicertitle> The best tooltip should be easy to implement without the need to create separate div containers to add the text of the tooltip. The nicertitle tooltip is exactly the one that would suit everyone’s need. Just fill the title attibute, that’s enough…

awesome – as always! so handy to know these articles are out there when a project needs them. great blog, made it to the main tab of my igoogle :)

A few of these are “old”, but.. most of all are good.. I need to sort through my bookmarks.. I have like 40+ “collections of good stuff”… ;P

Considering the way people use “tool tips” for inline advertising, I treat them the same way as I do pop-ups – get rid of them ASAP. I think Lapin’s right; if tool tips take over, I’m starting to navigate with my keyboard.

I find these tooltips to be one of the “new annoyances” of the web. Please use only CSS based solutions if you must use tooltips, and include an option to turn them off if you are using them all over the place. Thank you

Would be good to add some guidelines for those people who has no idea how to make tool tips to look attractive and not annoying.

What about the classic “title” attribute you can use in all existing tags? It’s the best tooltip to use: no css/javascript or whatsoever, search engines can read it, it adds metadata to your content, and all users know its use from Windows.

Just make a span-tag, maybe give it a different style, and use the ‘title’ attribute in it.

thanks for you efforts
i know a website just full with ajax project and it’s all free
http://www.ajaxdaddy.com/

Good article :)

You know the screenshot of the ‘Snap.com’ one? Where did that come from? Which site?

Holly smokes! So many tooltips – so much more annoyance :-(

Wow awesome resource… was just about to go around and search for some tooltip examples

Great selection, thanks.

I’m curious though, is there any way of retrieving screen shots of sites without using Snap.com?

Another one – AJAX-based Thesaurus Tooltip (
http://cmsdevelopment.com/thesaurus/ ). By the way it’s got PHP Programming Innovation Award November 2006 on phplasses.org

I prefer CSS. Thanks for the list!

Whatabout cotojatka? (web is in Czech only.. just hover some link or abbr…)

Have a look at track-issue.com, which is Ajax enabled, built on asp.net, prototype and scriptaculous frameworks. This site offers free issue tracking system

Here’s another nice tool tip / website image preview – http://www.artviper.net/news.php or http://www.artviper.net/tools.php, it shows an image of the website the link goes to and in addition the title tag as description. Mootools based.

Hi I just want to ask how can I add a heperlink in CSS Bubble tooltip which takes to you another page. I have tried it but I could not solve the problem. Can you please help me out with this problem.

As I tried when take mouse on the bubble tool the text remained unselected.

Thanking YOu IN Advance.

venky

Hi, could you please remove these advertisements ? It’s quite disturbing to get redirected to a site where the “sourcecode” is directly connected to urls of the creators, who mostly have created these scripts just to get famous with their url, although the original sourcecode is available everywhere. Anyway, nice work.

the following code works when the mouseovers on the box,but i want tooltip to be displayed when mouseoverson options,can pls somebody help,i am new to javascript and i am facing this problem

function ShowToolTip(ToolTipText,index) {
var MyToolTip=document.all["DHTMLToolTip"];

MyToolTip.innerHTML=ToolTipText;

MyToolTip.style.visibility=”visible”;

return true;
}

function HideToolTip() {
var MyToolTip=document.all["DHTMLToolTip"];

MyToolTip.style.visibility=”hidden”

return true;
}

Off
Low
Med.
High

WOW! Crazy! And what we to do?! Copies?
I prefer AJAX – maybe sometimes disabled – but over 70% ON!

FYI,
I’ve updated the “Ajax-Enabled Help Balloons” component to version 2.0 (now called just HelpBalloon.js).
Enjoy!

Beau Scott

Really, the above collections are amazhing, its very userful for me and will show different views from others.i got a lot of new ideas because of refered this collections.Great..

i like all bro, that’s nice effect for ur eye

Very good
Tanx

Fantastic!

Wow………..!
Great… n CSS really rocks..
Thnx….

nice! i always use sweet titles. now i can have more options. thanks for that :)

very very useful… thanks guys…….

good javascript tooltips http://www.Scriptremix.com

Wooow very complete list of tooltip javascript. I’glad for this information. Smashing Magazine is the best source information in the Net :). And i’m choose Mootools Tool tips for include into my Website.Couse this tooltip very simple and elegant . One again i say thanks.

How do you create a horizontal scrollbar in a listbox: ASP.NET of course using CSS

thanks for these useful codes

I prefer CSS based solution. Thanks anyway

thx for the information :)

great article thanx.

I think the word WOW suites for this Post Simply Super

Im looking for a tooltip which can display contents of .txt file on my server. Any recommendations?

O ye mi kuzze ve go. Zupper olmis bu

Thanks for a very nice collection to tooltip tools. I’ve done a lot of searching and this is the most comprehensive I’ve found. I’ve created a tool that might interest some of you. It generates tooltips from a glossary you create in a text file . It has been used primarily in online courses at the university I work for. Glossary-JS.

Thanks! nice post

Great compliation. I was looking for some examples and spent one hour before i found this….And it contains all the best ones i found !!!

Keep the good work..

You saved my day!