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

  1. <script src="/javascripts/prototype.js" type="text/javascript"></script>
  2. <script src="/javascripts/tooltip.js" type="text/javascript"></script>
  3.  
  4. <div id='tooltip' style="display:none; margin: 5px; background-color: red">
  5.   Detail infos on product 1....<br />
  6. </div>
  7.  
  8. <div id='product_1'>
  9.   This is product 1
  10. </div>
  11.  
  12. <script type="text/javascript">
  13.   var my_tooltip = new Tooltip('product_1', 'tooltip')
  14. </script>

It is available for download.

Posted by Dion Almaer at 10:21 am
23 Comments

+++--
3.9 rating from 292 votes

23 Comments »

Comments feed TrackBack URI

Looks nice and simple to me

Comment by MikeS — October 20, 2006

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.

Comment by James Starmer — October 20, 2006

Works fine on my site! Really usefull

Comment by Will — October 20, 2006

Doesnt work for IE 7…. Will there be an update?

Comment by Jimo — October 20, 2006

[…] Ajaxian » Prototype based JavaScript tooltip (tags: ajax rails) […]

Pingback by Like Your Work » Blog Archive » links for 2006-10-21 — October 20, 2006

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.

Comment by My Mind is Blown — October 20, 2006

I use a slightly modified version of Dustin Diaz’s Sweet Titles. I prefer not having to use script tags after to execute stuff.

Comment by Thomas Messier — October 20, 2006

Here, here, My Mind Is Blown!
Why can’t anyone else see this! Why use prototype for this!!!???
Answers on a postcard please.

Comment by ajaxianfading — October 20, 2006

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 ;-) */
}

Comment by romain garçon — October 21, 2006

oops a mistake…

a.help:hover span {
display:block!important;
display:inline-block;

sorry.

Comment by romain garçon — October 21, 2006

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).

Comment by Bertrand Gorge — October 21, 2006

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.

Comment by Ruby on Rails Blog — October 21, 2006

[…] 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. […]

Pingback by Prototype based JavaScript tooltip at There was Code; Then there was AJAX! — October 21, 2006

“too complicated and bloated,
… So I decided to create my own library that is based on prototype.js”

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.

Comment by Dustin Diaz — October 21, 2006

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.

Comment by Courtney Ringer — October 26, 2006

[…] O primeiro link de hoje: Prototype based JavaScript tooltip que trata de um script para tooltip utilizando o prototype, vale a pena conferir. […]

Pingback by Links comentados via del.icio.us - 5 » Japs — October 30, 2006

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?

Comment by Jamie — November 1, 2006

[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.

Trackback by JIRA: event manager — November 12, 2006

Really, why is not an example of this seems-to-be great technique on this site?

Comment by Tvorba webu — January 7, 2007

d

Comment by sukesh — January 25, 2007

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

Comment by Gene Kelly — February 14, 2007

I guess they do not post code here.

Comment by Gene Kelly — February 14, 2007

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.

Comment by Constantin Boiangiu — May 4, 2007

Leave a comment

You must be logged in to post a comment.