Friday, October 20th, 2006
Prototype based JavaScript tooltip
Category: JavaScript
, Library, Prototype
JavaScript Tooltip libraries number about as many as rounded CSS corner libraries.
Jonathan Weiss thought the ones he saw were "too complicated and bloated, did just too much and most of the time were still not flexible enough with the tooltip. So I decided to create my own library that is based on prototype.js".
It looks somewhat similar to Tooltip.js:
JAVASCRIPT:
-
-
<script src="/javascripts/prototype.js" type="text/javascript"></script>
-
<script src="/javascripts/tooltip.js" type="text/javascript"></script>
-
-
<div id='tooltip' style="display:none; margin: 5px; background-color: red">
-
Detail infos on product 1....<br />
-
</div>
-
-
<div id='product_1'>
-
This is product 1
-
</div>
-
-
<script type="text/javascript">
-
var my_tooltip = new Tooltip('product_1', 'tooltip')
-
</script>
-
It is available for download.
3.9 rating from 276 votes
Looks nice and simple to me
Well done. I could only get it to work with prototype 1.5.0_rc1 not 1.4.0. Just thought people might want to know.
Works fine on my site! Really usefull
Doesnt work for IE 7…. Will there be an update?
[...] Ajaxian » Prototype based JavaScript tooltip (tags: ajax rails) [...]
I don’t understand how such a simple tooltip needs anything more than five lines of javascript. Seriously, people, learn how to code and stop relying on bloated libraries like this. You have a hidden div, you position that div to your cursor, you display that div. If you want to display dynamic content, use the prototype.lite library. I could understand if it was a particularly beautiful tooltip, but I can’t stand watching people build bridges to cross puddles.
I use a slightly modified version of Dustin Diaz’s Sweet Titles. I prefer not having to use script tags after to execute stuff.
Here, here, My Mind Is Blown!
Why can’t anyone else see this! Why use prototype for this!!!???
Answers on a postcard please.
Without prototype is more safe…
[?] my tooltip
a.help {
position: relative;
text-decoration: none;
color: black;
border-bottom: 2px #eee dotted;
}
a.help span {
display: none;
}
a.help:hover {
background: none; /* IE hack */
z-index: 100;
}
a.help:hover span {
display: inline!important;
display:block;
max-width:200px;
position: absolute;
top: -1em;
left: -1em;
background: #ffffcc;
text-align: center;
color:#000;
padding:0 2px;
cursor:help; /* the cherry ;-) */
}
oops a mistake…
a.help:hover span {
display:block!important;
display:inline-block;
sorry.
wz_tooltip works better imho. Been using it for years, and had no problem.
This new tooltip.js is looking fine but it just doesn’t seem very relyable (did a 5 minutes test, got all sort of problems, trashed).
It worked on IE7 for me without any major hiccups. You can even do some fancy form within a form magic with some css manipulation. Nice and easy to implement. Now for a good ruby on rails helper renders a partial _help_page.rhtml inside the tooltip.
[...] JavaScript Tooltip libraries number about as many as rounded CSS corner libraries. But we all know when you pull out the .js collection and start playing some interesting stuff can happen.read more | digg story Share and Enjoy:These icons link to social bookmarking sites where readers can share and discover new web pages. [...]
Something is inherently wrong with that thought, especially with something like Sweet Titles that has no library dependencies and it’s short and easy to set up. However as far as flexibility goes, I’ve also set up a YUI Version of sweet titles that allows you to have multiple instances of a tooltip (kind of like this Prototype version) but allows you to adjust the time, opacity, and delay :)
var o = new YAHOO.widget.SweetTitles(elements,
{
time : 2,
opacity : 0.8,
delay : 0.5
}
);
o.init();
I will hand it to Jonathan, this eventually had to be done for Prototype. It’s a necessary evil for every library.
But the point that is constantly missed in these discussions, is that you’ve lost all the semantics by using primarily script-based solutions. Anyone can put together some script that takes one DIV and overlays it onto another, but what does this DIV mean? How would a voice system understand it, for example? Romain’s solution gets much closer to the ideal, since he uses a class of ‘help’ as the hook for the functionality.
You might be interested to look at Declarative, Accessible Ajax with the HTML role attribute and Is it AJAX, Ajax…or XForms? for more on using mark-up to define behaviour at the same time as preserving semantics.
Regards,
Mark
Mark Birbeck
CEO
formsPlayer.com
Why there are not working examples on the site?
I’ve experienced performance issues with sweet titles. I like the fact that it’s object oriented but it loops through all the title tags on whatever elements are defined and had caused my application to slow down. I also tried applying it to IMG tags and I got an error.
[...] O primeiro link de hoje: Prototype based JavaScript tooltip que trata de um script para tooltip utilizando o prototype, vale a pena conferir. [...]
I like sweet titles too, but I will reiterate the previous comment:
It is broken and it clashes with every other script that relies on the title attribute. ESP. Any Lightbox style script. I was hoping for a solution that would let me use a “nice-tiltle” script in conjunction with a lightbox script, but it seems non of them fit the bill. How about one with a “rel” attribute so I can tell it where to be applied and have it leave everything else alone?
[EVTMGR-5] Add tooltip support for events in calendar view
null Use Prototype base tooltip (http://ajaxian.com/archives/prototype-based-javascript-tooltip) to display events details in calendar view.
Really, why is not an example of this seems-to-be great technique on this site?
d
Like Your Work your post inspired me to drop this script and write the following:
Javascript Code:
I get displayed on hover
Rollover Me
Its just that damn easy why load up on a hefty file. Style your hover div anyway you want.
Im a Cakephp fan.
Thanks,
Gene Kelly
Gkelly
I guess they do not post code here.
I like sweet titles too, but I will reiterate the previous comment:
It is broken and it clashes with every other script that relies on the title attribute. ESP. Any Lightbox style script. I was hoping for a solution that would let me use a “nice-tiltle†script in conjunction with a lightbox script, but it seems non of them fit the bill. How about one with a “rel†attribute so I can tell it where to be applied and have it leave everything else alone?
It’s kind of late to answer this but there is an answer. You needed to use rel? change this:
current[j].removeAttribute(’title’);
to this
current[j].removeAttribute(’rel’);
in sweetTitles.js and you’re done.