<pedrocorreia.net ⁄>
corner
<mySearch ⁄> <mySearch ⁄>

corner
 
corner
<mySnippets order="rand" ⁄> <mySnippets order="rand" ⁄>

corner
 
corner
<myContacts ⁄> <myContacts ⁄>

<email ⁄>


pc@pedrocorreia.net

<windows live messenger ⁄>


pedrojacorreia@hotmail.com

<myCurriculum type="pdf" ⁄>


Download
corner
 
corner
<myBlog show="last" ⁄> <myBlog show="last" ⁄>

corner
 
corner
<myNews show="rand" ⁄> <myNews show="rand" ⁄>

corner
 
corner
<myNews type="cat" ⁄> <myNews type="cat" ⁄>

corner
 
corner
<myQuote order="random" ⁄> <myQuote order="random" ⁄>

Transportai um punhado de terra todos os dias e fareis uma montanha
corner
 
corner
<myPhoto order="random" ⁄> <myPhoto order="random" ⁄>

<pedrocorreia.net ⁄>
corner
 
corner
<myAdSense ⁄> <myAdSense ⁄>

corner
 
corner
<myVisitorsMap ⁄> <myVisitorsMap ⁄>

corner
 
 

<Javascript Tooltip ⁄ >




clicks: 16159 16159 2009-04-10 2009-04-10 goto mySnippets mySnippets javascript  Download  Bookmark This 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;

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




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

  1. /**
  2. * BasicToolTip
  3. *
  4. * @author: pedrocorreia.net
  5. */
  6. var BasicToolTip = function(tips) {
  7.  
  8. /**
  9. * Get Html Object reference, by its ID
  10. *
  11. * @param String Id Object
  12. * @return Object
  13. */
  14. var $ = function(id) { return document.getElementById(id); };
  15.  
  16. /**
  17. * Get Html Objects references, by their Tag Name
  18. *
  19. * @param String Id Object
  20. * @return Object
  21. */
  22. var $tag = function(tag) { return document.getElementsByTagName(tag); };
  23.  
  24. /**
  25. * Get Html Objects references, by their Name
  26. *
  27. * @param String Id Object
  28. * @return Object
  29. */
  30. var $name = function(name) { return document.getElementsByName(name); };
  31.  
  32. var o = $("tooltip"); //our tooltip div
  33.  
  34. var _tips = {}; //tips container
  35.  
  36. /**
  37. * Get Tip
  38. * @param String Id
  39. */
  40. var _Tip = function(id) { return (_tips[id] || ""); };
  41.  
  42. /**
  43. * Get Mouse Coordinates
  44. * @param Event
  45. *
  46. * @return Int X Coordinate
  47. * @return Int Y Coordinate
  48. * @return Int Offset X
  49. * @return Int Offset Y
  50. */
  51. var _MouseCoord = function(event) {
  52. event = event || window.event;
  53. var e = {
  54. _x: (event.pageX || event.clientX + (document.documentElement || document.body).scrollLeft),
  55. _y: (event.pageY || event.clientY + (document.documentElement || document.body).scrollTop)
  56. };
  57. var offSet = { _x: 10, _y: -10 };
  58.  
  59. return { X: e._x, Y: e._y, OffX: offSet._x, OffY: offSet._y };
  60. };
  61.  
  62. /**
  63. * Show Tooltip
  64. *
  65. * @param Object Element
  66. * @param Event
  67. */
  68. var _Show = function(el, event) {
  69. var mCoord = _MouseCoord(event);
  70. o.style.left = mCoord.X + mCoord.OffX + "px";
  71. o.style.top = mCoord.Y + mCoord.OffY + "px";
  72.  
  73. var tip = _Tip(el.getAttribute("id"));
  74. o.innerHTML = (tip.img ? "<img src='" + tip.img + "' /><br/>" : "") + (tip.txt || el.getAttribute("title"));
  75. _Fader(o).Set(100);
  76. };
  77.  
  78. /**
  79. * Hide Tooltip by fading it out
  80. */
  81. var _Hide = function() { _Fader(o).Fade(100, 20, 100, "down"); };
  82.  
  83. /**
  84. * Fader Class
  85. *
  86. * @param Object
  87. * @return Function Set
  88. * @return Function Fade
  89. */
  90. var _Fader = function(o) {
  91.  
  92. /**
  93. * Fade
  94. *
  95. * @param Int Value
  96. * @param Int Step
  97. * @param Int Speed
  98. * @param String Fade: up or down
  99. */
  100. var _Fade = function(value, step, speed, direction) {
  101. var interval = setInterval(
  102. function() {
  103. value += (direction==="up" ? step : -step);
  104. if (value <= 0 || value>=100) {
  105. _Set((value<=0)?0:100);
  106. clearInterval(interval);
  107. return;
  108. }
  109. _Set(value);
  110. }, speed);
  111. };
  112.  
  113. /**
  114. * Set Opacity value
  115. *
  116. * @param Int
  117. */
  118. var _Set = function(value) {
  119. o.style.display = (value <= 0) ? "none" : "block";
  120. o.style.opacity = value / 100;
  121. o.style.filter = 'alpha(opacity=' + value * 1 + ')';
  122. };
  123.  
  124. return { Set: _Set, Fade: _Fade };
  125. };
  126.  
  127. /**
  128. * Add Event
  129. *
  130. * @param Object
  131. */
  132. var _AddEvents = function(o) {
  133. if (!o) { return; }
  134. o.onmousemove = function(event) { _Show(this, event); };
  135. o.onmouseout = function() { _Hide(); };
  136. };
  137.  
  138. /**
  139. * Build Tip with our specific format
  140. *
  141. * @param String Key
  142. * @param Object
  143. */
  144. var _BuildTipObject = function(key, tip) {
  145. var _aux_tip={};
  146. _aux_tip[key]=({img: tip.img, txt: tip.txt});
  147. return _aux_tip;
  148. };
  149.  
  150. /**
  151. * Add Event by Object ID
  152. *
  153. * @param Object
  154. */
  155. var _ById = function(id) { _AddEvents($(id)); };
  156.  
  157. /**
  158. * Add tips
  159. *
  160. * @param Object
  161. */
  162. this.Add = function(tips) {
  163. for (var tip in tips) {
  164. if (tip) {
  165. _tips[tip] = tips[tip];
  166. _ById(tip);
  167. }
  168. }
  169. };
  170.  
  171. /**
  172. * Add Event by Tag Name
  173. *
  174. * @param Object
  175. * @param Object
  176. */
  177. this.AddByTag = function(tag, tip) {
  178. for (var i = 0, elems = $tag(tag), count = elems.length; i < count; i++) {
  179. if(elems[i].id) {this.Add(_BuildTipObject(elems[i].id, tip));}
  180. }
  181. };
  182.  
  183. /**
  184. * Add Event by Name
  185. *
  186. * @param Object
  187. * @param Object
  188. */
  189. this.AddByName = function(name, tip) {
  190. for (var i = 0, elems = $name(name), count = elems.length; i < count; i++) {
  191. if(elems[i].id) {this.Add(_BuildTipObject(elems[i].id, tip));}
  192. }
  193. };
  194.  
  195. //add initial tips
  196. this.Add(tips);
  197. };








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

  1. /**
  2. * @author pedrocorreia.net
  3. */
  4. window.onload = function() {
  5.  
  6. //tips object
  7. var tips = {
  8. lbl_m: {img: "", txt: "Please choose your Sex"},
  9. lbl_f: {txt: "Please choose your Sex"},
  10. my_name: { img: "", txt: "Enter your name ..." }
  11. };
  12.  
  13. //create object and add our tips object
  14. var btt = new BasicToolTip(tips);
  15.  
  16. //this affects all span elements
  17. btt.AddByTag("span", { img: "", txt: "Tooltip test in &lt;span&gt;"});
  18.  
  19. //this will affect all html object with name="sex"
  20. btt.AddByName("sex", {img: "", txt: "Please choose your Sex"});
  21.  
  22. //this will affect the html object with id="my_span"
  23. btt.Add({ my_span: { img: "http://www.google.co.uk/logos/logo_newyear.gif", txt: "Tooltip test in &lt;span&gt;"} });
  24.  
  25. };






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:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
  4. <head>
  5. <title>BasicToolTip</title>
  6. <link rel="Stylesheet" href="style.css" />
  7. <script type="text/javascript" src="BasicToolTip.js"></script>
  8. <script type="text/javascript" src="Init.js"></script>
  9. </head>
  10.  
  11. <body>
  12.  
  13. <div id="tooltip"><!-- our tooltip --></div>
  14.  
  15. <label for="my_name">Name</label> <input type="text" id="my_name" />
  16.  
  17. <br /><br />
  18. <input type="radio" name="sex" value="m" id="opt_m" /><label for="opt_m" id="lbl_m">Male</label>
  19. <input type="radio" name="sex" value="f" id="opt_f" /> <label for="opt_f" id="lbl_f">Female</label>
  20.  
  21. <br /><br />
  22. <span id="my_span">Hi this a tooltip text ...</span>
  23.  
  24. </body>
  25. </html>



Here's a short video of this script working:









If you have any doubt or found any error, please drop me an email.








clicks: 16159 16159 2009-04-10 2009-04-10 goto mySnippets mySnippets javascript  Download  Bookmark This Bookmark This