Friday, October 20th, 2006
Category: JavaScript
, Library, Prototype
<
p
>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.
- Ajax everywhere: Which framework to choose?
Writing and debugging Ajax, a JavaScript- and XML-driven development technique, can be difficult. In this tip, an expert introduces several frameworks...
- Ajax everywhere: Which framework to choose?
Writing and debugging Ajax, a JavaScript- and XML-driven development technique, can be difficult. In this tip, an expert introduces several frameworks...
- Choosing an Ajax framework
Your customers won't have to fear Ajax if they have the right tools to work with. Help them determine which Ajax-specific framework, library or...
- JavaScript Learning Guide
This SearchDomino.com guide introduces you to JavaScript in a Notes/Domino environment, explains best practices and pitfalls to avoid and provides...
- Using images in tooltips
The tooltip came from an idea regarding how to show contextual help in the user interface and is now considered an essential part of a UX designer's...
3.9 rating from 287 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.
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.