<Javascript Tooltip ⁄ >

20412

2009-04-10

mySnippets javascript

Download

Bookmark This

'The tooltip is a common graphical user interface element. It is used in conjunction with a cursor, usually a mouse pointer. The user hovers the cursor over an item, without clicking it, and a small "hover box" appears with supplementary information regarding the item being hovered over.' in Wikipedia.

This will be an example snippet on how to make a tooltip. I consider a tooltip a nice helping guide to our users, it should help them making brief explanations about a content. As everything else, it should not be overused, or it will cause a negative impact on our design and user interaction.

Basically we'll have a div with position: absolute that will move regarding the mouse position.

In this example, virtually, each html object can have a tooltip, as long as it has an ID attribute, this is, you can only add a tooltip if that html object the attribute id defined.

You can add tooltip by 3 different manners:

By an object ID;

By TagName;

By an object Name

This tooltip will allow you to show an image and/or description; this is defined in a json object; if the description's not specified the script will try to check if the html object has a title attributes, if it does, it will use its title, but you can easily disable that feature or adding something else.
It's a rather simple script and easy to use, as you will ahead.

Here goes the code and some explanations.

style.css, this is our tooltip div, you can easily customize it to your website layout; just keep in mind that "position: absolute" and "display: none" should be left as it;

#tooltip {
  position:absolute; display: none; z-index:1000;
  background-color:#900; color: #fff;
  padding: 2px;
}

BasicToolTip.js, our main class. It has some functionalities such as: Show and Hide tooltip; get mouse coordinates; fading animation; etc.

/**
* BasicToolTip
*
* @author: pedrocorreia.net
*/
var BasicToolTip = function(tips) {
 
  /**
  * Get Html Object reference, by its ID
  *
  * @param String Id Object
  * @return Object
  */
  var $ = function(id) { return document.getElementById(id); };
 
  /**
  * Get Html Objects references, by their Tag Name
  *
  * @param String Id Object
  * @return Object
  */
  var $tag = function(tag) { return document.getElementsByTagName(tag); };
 
  /**
  * Get Html Objects references, by their Name
  *
  * @param String Id Object
  * @return Object
  */
  var $name = function(name) { return document.getElementsByName(name); };
 
  var o = $("tooltip"); //our tooltip div
 
  var _tips = {}; //tips container
 
  /**
  * Get Tip
  * @param String Id
  */
  var _Tip = function(id) { return (_tips[id] || ""); };
 
  /**
  * Get Mouse Coordinates
  * @param Event
  *
  * @return Int X Coordinate
  * @return Int Y Coordinate
  * @return Int Offset X
  * @return Int Offset Y
  */
  var _MouseCoord = function(event) {
    event = event || window.event;
    var e = {
      _x: (event.pageX || event.clientX + (document.documentElement || document.body).scrollLeft),
      _y: (event.pageY || event.clientY + (document.documentElement || document.body).scrollTop)
    };
    var offSet = { _x: 10, _y: -10 };
 
    return { X: e._x, Y: e._y, OffX: offSet._x, OffY: offSet._y };
  };
 
  /**
  * Show Tooltip
  *
  * @param Object Element
  * @param Event
  */
  var _Show = function(el, event) {
    var mCoord = _MouseCoord(event);
    o.style.left = mCoord.X + mCoord.OffX + "px";
    o.style.top = mCoord.Y + mCoord.OffY + "px";
 
    var tip = _Tip(el.getAttribute("id"));
    o.innerHTML = (tip.img ? "<img src='" + tip.img + "' /><br/>" : "") + (tip.txt || el.getAttribute("title"));
    _Fader(o).Set(100);
  };
 
  /**
  * Hide Tooltip by fading it out
  */
  var _Hide = function() { _Fader(o).Fade(100, 20, 100, "down"); };
 
  /**
  * Fader Class
  *
  * @param Object
  * @return Function Set
  * @return Function Fade
  */
  var _Fader = function(o) {
 
    /**
    * Fade
    *
    * @param Int Value
    * @param Int Step
    * @param Int Speed
    * @param String Fade: up or down
    */
    var _Fade = function(value, step, speed, direction) {
      var interval = setInterval(
        function() {
          value += (direction==="up" ? step : -step);
          if (value <= 0 || value>=100) {
            _Set((value<=0)?0:100);
            clearInterval(interval);
            return;
          }
          _Set(value);
        }, speed);
    };
 
    /**
    * Set Opacity value
    * 
    * @param Int
    */
    var _Set = function(value) {
      o.style.display = (value <= 0) ? "none" : "block";
      o.style.opacity = value / 100;
      o.style.filter = 'alpha(opacity=' + value * 1 + ')';
    };
 
    return { Set: _Set, Fade: _Fade };
  };
 
  /**
  * Add Event
  * 
  * @param Object
  */
  var _AddEvents = function(o) {
    if (!o) { return; }
    o.onmousemove = function(event) { _Show(this, event); };
    o.onmouseout = function() { _Hide(); };
  };
 
  /**
  * Build Tip with our specific format
  *
  * @param String Key
  * @param Object
  */
  var _BuildTipObject = function(key, tip) {
    var _aux_tip={};
    _aux_tip[key]=({img: tip.img, txt: tip.txt});
    return _aux_tip;
  };
 
  /**
  * Add Event by Object ID
  * 
  * @param Object
  */
  var _ById = function(id) { _AddEvents($(id)); };
 
  /**
  * Add tips
  * 
  * @param Object
  */
  this.Add = function(tips) {
    for (var tip in tips) {
      if (tip) {
        _tips[tip] = tips[tip];
        _ById(tip);
      }
    }
  };
 
  /**
  * Add Event by Tag Name
  * 
  * @param Object
  * @param Object
  */
  this.AddByTag = function(tag, tip) {
    for (var i = 0, elems = $tag(tag), count = elems.length; i < count; i++) {
      if(elems[i].id) {this.Add(_BuildTipObject(elems[i].id, tip));}
    }
  };
 
  /**
  * Add Event by Name
  * 
  * @param Object
  * @param Object
  */
  this.AddByName = function(name, tip) {
    for (var i = 0, elems = $name(name), count = elems.length; i < count; i++) {
      if(elems[i].id) {this.Add(_BuildTipObject(elems[i].id, tip));}
    }
  };
 
  //add initial tips
  this.Add(tips);
};

Init.js, let's create our object and add some tooltips to a few html objects.

/**
* @author pedrocorreia.net
*/
window.onload = function() {
 
  //tips object
  var tips = {
    lbl_m: {img: "", txt: "Please choose your Sex"},
    lbl_f: {txt: "Please choose your Sex"},
    my_name: { img: "", txt: "Enter your name ..." }
  };
 
  //create object and add our tips object
  var btt = new BasicToolTip(tips);
 
  //this affects all span elements
  btt.AddByTag("span", { img: "", txt: "Tooltip test in &lt;span&gt;"});
 
  //this will affect all html object with name="sex"
  btt.AddByName("sex", {img: "", txt: "Please choose your Sex"});
 
  //this will affect the html object with id="my_span"
  btt.Add({ my_span: { img: "http://www.google.co.uk/logos/logo_newyear.gif", txt: "Tooltip test in &lt;span&gt;"} });
 
};

var tips = {
lbl_m: {img: "", txt: "Please choose your Sex"},
lbl_f: {txt: "Please choose your Sex"},
my_name: { img: "", txt: "Enter your name ..." }
};

This is an example to add a tooltip by an ID

lbl_m; lbl_f; my_name are 3 html objects;

Each html object tooltip will have 2 attributes:

img -> it can be a relative or absolute URL(optional)

txt -> description (optional)

So for example if you have a html object with id="my_span_age" you can easily achieve it doing this:

var tip = {
my_span_age: {img: "image.jpg", txt: "This a simple description about something"}
};

Then you have to Add this tip to our class so that it will show it:

btt.Add(tip);
//or
btt.Add({ my_span_age: { img: "http://www.google.co.uk/logos/logo_newyear.gif", txt: "Tooltip test in <span>"} });

There are 2 ways to add tooltips: By TagName and By Name, our class will search for html objects and if they have an ID it will add the tooltip to it.

Please keep in mind that you can override tooltips, this is each and every html object can only have one and one only tooltip, so if you already specified a tooltip to a span element and then you use :

AddByTag("span", ({img: "image.jpg", txt:"blah blah blah"});

It will override the previous, or vice-versa.

Our html file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
  <title>BasicToolTip</title>
  <link rel="Stylesheet" href="style.css" />
  <script type="text/javascript" src="BasicToolTip.js"></script>
  <script type="text/javascript" src="Init.js"></script>
</head>
 
<body>
 
  <div id="tooltip"><!-- our tooltip --></div>
 
  <label for="my_name">Name</label> <input type="text" id="my_name" />
 
  <br /><br />
  <input type="radio" name="sex" value="m" id="opt_m" /><label for="opt_m" id="lbl_m">Male</label>
  <input type="radio" name="sex" value="f" id="opt_f" /> <label for="opt_f" id="lbl_f">Female</label>
 
  <br /><br />
  <span id="my_span">Hi this a tooltip text ...</span>
 
</body>
</html>

Here's a short video of this script working: