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:
JAVASCRIPT:
-
-
new Effect.Tooltip(element, content, {title : 'title', className: 'class', offset: {x:0, y:0}});
-
4 rating from 104 votes
Not quite sure why you’d need both Scriptaculous and Prototype to do this? what benefit is Scriptaculous providing?
It’s useful when your site its JS framework is Prototype/Scriptaculous and you need some easy to use tooltip solution.
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.
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.
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
title=”" rox0rz
Ha. I’m not a dick after all. sukkit brad.
isn’t there’s more interesting things on the net than another strange tooltips? this sucks
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.
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?
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.
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.
http://static.twoday.net/matsblog/stuff/Tooltip/Tooltip.Demo.html
seems gr8
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.)
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?
cheers
Hi,
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
I’ve test it on Safari 3 Beta on windows and it works fine:]
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.
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.
Is there a way to hide the browsers default title tooltip?
@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.
If you have a minute, checkout my tooltip implementation at:
http://codeeazy.wordpress.com/2007/09/30/simple-tooltips/
Thanks,
Mukul.
Thanks for your link.
Mine:fsbo owner
by slirtj on Wed. Apr. 23, 2008