Tuesday, July 3rd, 2007

Script.aculo.us Effect.Tooltip

Category: JavaScript, Library, Scriptaculous

Nick Stakenburg has written a nice simple tooltip built on Script.aculo.us called Effect.Tooltip.

It is as simple to setup as:


  1. new Effect.Tooltip(element, content, {title : 'title', className: 'class', offset: {x:0, y:0}});


Posted by Dion Almaer at 6:25 am

4 rating from 128 votes


Comments feed TrackBack URI

Not quite sure why you’d need both Scriptaculous and Prototype to do this? what benefit is Scriptaculous providing?

Comment by boodie — July 3, 2007

It’s useful when your site its JS framework is Prototype/Scriptaculous and you need some easy to use tooltip solution.

Comment by iBram — July 3, 2007

I have no idea why people like “boodie” even post a comment. If they use their head for just a split second they could figure it out. Duh! If you are using the framework this is awesome!

If you want just a simple tooltip script go to Dynamic Drive or something, even then I doubt people like “boodie” have the “know how” to setup the script.

Comment by Brad — July 3, 2007

Boodie was right I think. What value does using Scriptaculous provide? If its just for fade effects or something then I think maybe that should be optional. It doesn’t really matter since I always use both libraries in tandem anyways.

Comment by Philip Plante — July 3, 2007

Thanks for linking me.
Building this on top of the scriptaculous Effect frameworks seemed like a natural way to go at the time. Looking back on it now I realise I could have done without it.

This is more a proof of concept I hoped others would build upon. If I had to write this again I’d create a new class that uses scriptaculous for effects. But I wonder if people would pick that up as fast as this. I’d probably still like to have an Effect.Tooltip

Comment by Nick Stakenburg — July 3, 2007

title=”” rox0rz

Comment by Marty — July 3, 2007

Ha. I’m not a dick after all. sukkit brad.

Comment by boodie — July 3, 2007

isn’t there’s more interesting things on the net than another strange tooltips? this sucks

Comment by Anonymous — July 3, 2007

It would be nice if it didn’t move around with the mouse. It would make reading the contents easier and require less mouse management.

Comment by Sean — July 3, 2007

Due to the circumstances I’m being forced to use Safari 2.0 now. Every time I try the demo page, it crashes the browser, so it’ll need work on that. Also, should a whole post on a site like Ajaxian be devoted to just a snippet, maybe I can get them to write a post on how I wrapped up a whole XHR request in just one function!
I don’t see anything either on how to install this, could this be clarified a bit?

Comment by Scriptor — July 3, 2007

If Safari crashes it means Safari is a buggy browser, sorry. But: I like this tooltip effect, I wouldn’t have used Scripta, only Proto, but frameworks are good, period.

Comment by Dead Cabbit — July 3, 2007

I have to say, I much prefer Matthias Platzer’s approach to tooltips, which has been floating around for a while now. The markup is less obtrusive and the script quite configurable. It also remains bound to the object being tipped, rather than the mouse, which personally I find much more usable.


Comment by Andrew Jessup — July 3, 2007

seems gr8

Comment by s — July 3, 2007

I really like the way the tool-tip moves. A least these don’t end up stuck between your mouse and what you are trying to interact with (while being ugly, uninformative and leaving you searching around/waiting to see if one will pop up.)

Comment by Adrian — July 4, 2007

well guys, generally you put some great news and posts. but that one really looks a little strange to me.
for a simple thing like tooltip this guys is using two JS libraries?


Comment by ajaxus — July 4, 2007

you might also want to check out Returnable . It’s a end-user programming oriented approach to adding intuitive behaviour just like a tooltip.

Keep Clicking,
Bhasker V Kode,
Lead Architect – The Returnable Project

Comment by Bhasker V Kode — July 5, 2007

I’ve test it on Safari 3 Beta on windows and it works fine:]

Comment by Marcin Polak — July 5, 2007

I’m missing a delay.
A good tooltip implementation should include a delay to exclude accidental mouse-overs while moving to somewhere else. Should be easy to implement and would make this fine work a even better one.

Comment by nicolash — July 24, 2007

I’ve taken some time to write a new Class based on Effect.Tooltip.
Prototip has new features like: fixed positioning, hooking, IE selectbox fix and optional effects. Scriptaculous is no longer required. You only need it when you use effects. I’ve covered most of your suggestions with Prototip but I’m always looking for new ideas, so if you have a suggestion for a new feature let me know.

Comment by Nick Stakenburg — August 2, 2007

Is there a way to hide the browsers default title tooltip?

Comment by Jigga — August 8, 2007

@Jigga: There are ways to do this but I’m not planning to work this into Prototip because I don’t want to break expected behaviour. You could easily work around this yourself using another attribute instead, rel for example.

Comment by Nick — August 8, 2007

If you have a minute, checkout my tooltip implementation at:


Comment by Mukul Kumar — September 30, 2007

Leave a comment

You must be logged in to post a comment.