tooltip.js - version 0.2

Posted by Jonathan

I just releases version 0.2 of my tooltip.js library.

The new version follows the mouse correctly on Firefox (thanks to Graham TerMarsch) and can apply a constant delta when displaying the tooltip. This can be useful if your CSS rules include absolute positioning that can result in a constant offset. 

var my_tooltip = new Tooltip('id_of_trigger_element', 
                            'id_of_tooltip_to_show_element', 
                            { delta_x: -210, delta_y: 20 })

Another nice addition (by Xavier Lepaul) is the ability to create tooltips out of given text. Version 0.1 required you to give it the DOM id of a valid element. Version 0.2 will create a div with the class tooltip if it is given only text: 

var my_other_tooltip = new Tooltip('id_of_trigger_element', 'a nice description')

This can be used to create popups out of title attributes: 

Event.observe(window,"load",function() { 
  $$("*").findAll(function(node){
    return node.getAttribute('title');
   }).each(function(node){
     new Tooltip(node,node.title);
     node.removeAttribute("title");
   });
});

You can get tooltip.js here and you can try out the live demo.

Comments

Leave a response

  1. Michael – December 12, 2006 @ 04:09 PM
    Thanks for the update! The Firefox issue is fixed now. Very nice!
  2. Sandro Paganotti – December 12, 2006 @ 04:58 PM
    Thank you for this well made piece of code :) A nice feature would be adding a set of cool template tooltip windows. Thank you again.
  3. Rene – December 12, 2006 @ 06:33 PM
    Nice code... The only feature i missed is an imidently tooltip on creation. Like: var my_other_tooltip = new Tooltip('id_of_trigger_element', 'a nice description', show_imidently) i need when tooltips should load their content from an ajax-call or were created at runtime... Bye
  4. Jonathan – December 12, 2006 @ 07:05 PM
    @Rene: Do you mean that the Tooltip should be immediately visible after the JS constructor call? If so, where should the mouse be and how would you handle the events (mouseout & co)? Apart from these questions showing the tooltip after construction is very easy to implement.
  5. kevin – December 12, 2006 @ 09:12 PM
    this page doesnt render very nicely with Internet Explorer 7. I had to open Oprah to leave this comment.
  6. Rene – December 13, 2006 @ 08:08 AM
    @Jonathan: sorry for my broken english... Yes i need that the tooltip is immediately visible after the constructor call. That is very nice when the content of the tooltip is loaded via an ajax-call... Bye, René
  7. Max – December 13, 2006 @ 05:05 PM
    Hi Jonathan, after searching the web for a tooltip widget, I choosed yours. I want to share a small addition I made. I'm using the automatic creation from title attribute. I wanted to restrict the searching to elements with a given class. Also I added the ability to (de)activate all tooltips at once, clicking somewhere. These features are packaged in a small object, leaving your code untouched: var aide = { bulles: [] , active: true //, mess_actif : 'désactiver' //, mess_inactif : 'activer' , activer: function () { this.bulles.each(function (bulle) { bulle.registerEvents(); } ); this.active = true; //$('option_aide').innerHTML = this.mess_actif; } , stopper: function () { this.bulles.each(function (bulle) { bulle.destroy(); } ); this.active = false; //$('option_aide').innerHTML = this.mess_inactif; } , init: function () { $A(document.getElementsByClassName('aide')) .each(function(node){ this.bulles.push( new Tooltip(node, node.title, {min_distance_x: 10, min_distance_y: 16} ) ); node.removeAttribute("title"); }.bind(this)); if (!this.active) this.stopper(); } , inverser: function () { if (this.active) this.stopper(); else this.activer(); } } Commented lines are for changing the activate link time at run-time, for multilingual sites. BTW, this markdown syntax is dumb
  8. Jonathan – December 13, 2006 @ 05:15 PM
    Hi Max, This looks interesting, can you send the extension via email, so that the syntax will look ok? Thanks, Jonathan
  9. Max – December 14, 2006 @ 08:51 PM
    Sent yesterday, did you receive it?
  10. Josh – December 14, 2006 @ 11:02 PM
    higlight the script here and click 'view source' you will see it fine.
  11. Josh – December 14, 2006 @ 11:04 PM
    I am also in need of something like this. great its based on prototype which means I can easily add ajax loading ability to it. I will post the code once I get it up >:)
  12. JohnB – December 15, 2006 @ 08:30 AM
    Small and sweet! A nice additional method would attach "tooltip_X" to each item named "trigger_X" - which would make it really easy to specify tooltips in the HTML with nothing more than the default tooltip.js. Of course, custom behaviour could be created by using a name other than "trigger_X".