Plugins/Tips.js

   1 /*
   2 Script: Tips.js
   3         Tooltips, BubbleTips, whatever they are, they will appear on mouseover
   4
   5 Dependencies:
   6         <Moo.js>, <Function.js>, <Array.js>, <String.js>, <Element.js>, <Fx.js>
   7
   8 Author:
   9         Valerio Proietti, <http://mad4milk.net>
  10
  11 License:
  12         MIT-style license.
  13
  14 Credits:
  15         Tips.js is based on Bubble Tooltips (<http://web-graphics.com/mtarchive/001717.php>) by Alessandro Fulcitiniti <http://web-graphics.com>
  16 */
  17
  18 /*
  19 Class: Tips
  20         Display a tip on any element with a title and/or href.
  21
  22 Arguments:
  23         elements - a collection of elements to apply the tooltips to on mouseover.
  24         options - an object. See options Below.
  25
  26 Options:
  27         transitionStart - the transition effect used to show the tip (see <Fx.Transitions>).
  28         transitionEnd - the transition effect used to hide the tip (see <Fx.Transitions>).
  29         maxTitleChars - the maximum number of characters to display in the title of the tip. defaults to 30.
  30         fxDuration - the duration (in ms) for the transition effect when the tip to appears and disappears. defaults to 150.
  31         maxOpacity - how opaque to make the tooltip (0 = 0% opaque, 1= 100% opaque). defaults to 1.
  32         timeOut - the delay to wait to show the tip (how long the user must hover to have the tooltip appear). defaults to 100.
  33         className - the class name to apply to the tooltip
  34
  35 Example:
  36         (start code)
  37         <img src="/images/i.png" title="The body of the tooltip is stored in the title" tooltitle="The Title of the Tooltip" class="toolTipImg"/>
  38         <script>
  39                 var myTips = new Tips($S('.toolTipImg'), {
  40                         maxTitleChars: 50, //I like my captions a little long
  41                         maxOpacity: .9, //let's leave a little transparancy in there
  42                 });
  43         </script>
  44         (end)
  45 */
  46
  47 var Tips = new Class({
  48
  49         setOptions: function(options){
  50                 this.options = {
  51                         transitionStart: Fx.Transitions.sineInOut,
  52                         transitionEnd: Fx.Transitions.sineInOut,
  53                         maxTitleChars: 30,
  54                         fxDuration: 150,
  55                         maxOpacity: 1,
  56                         timeOut: 100,
  57                         className: 'tooltip'
  58                 };
  59                 Object.extend(this.options, options || {});
  60         },
  61
  62         initialize: function(elements, options){
  63                 this.elements = elements;
  64                 this.setOptions(options);
  65                 this.toolTip = new Element('div').addClassName(this.options.className).setStyle('position', 'absolute').injectInside(document.body);
  66                 this.toolTitle = new Element('H4').injectInside(this.toolTip);
  67                 this.toolText = new Element('p').injectInside(this.toolTip);
  68                 this.fx = new fx.Style(this.toolTip, 'opacity', {duration: this.options.fxDuration, wait: false}).hide();
  69                 $A(elements).each(function(el){
  70                         $(el).myText = el.title || false;
  71                         if (el.myText) el.removeAttribute('title');
  72                         if (el.href){
  73                                 if (el.href.test('http://')) el.myTitle = el.href.replace('http://', '');
  74                                 if (el.href.length > this.options.maxTitleChars) el.myTitle = el.href.substr(0,this.options.maxTitleChars-3)+"...";
  75                         }
  76                         if (el.myText && el.myText.test('::')){
  77                                 var dual = el.myText.split('::');
  78                                 el.myTitle = dual[0].trim();
  79                                 el.myText = dual[1].trim();
  80                         }
  81                         el.onmouseover = function(){
  82                                 this.show(el);
  83                                 return false;
  84                         }.bind(this);
  85                         el.onmousemove = this.locate.bindAsEventListener(this);
  86                         el.onmouseout = function(){
  87                                 this.timer = $clear(this.timer);
  88                                 this.disappear();
  89                         }.bind(this);
  90                 }, this);
  91         },
  92
  93         show: function(el){
  94                 this.toolTitle.innerHTML = el.myTitle;
  95                 this.toolText.innerHTML = el.myText;
  96                 this.timer = $clear(this.timer);
  97                 this.fx.options.transition = this.options.transitionStart;
  98                 this.timer = this.appear.delay(this.options.timeOut, this);
  99         },
 100
 101         appear: function(){
 102                 this.fx.custom(this.fx.now, this.options.maxOpacity);
 103         },
 104
 105         locate: function(evt){
 106                 var doc = document.documentElement;
 107                 this.toolTip.setStyles({'top': evt.clientY + doc.scrollTop + 15 + 'px', 'left': evt.clientX + doc.scrollLeft - 30 + 'px'});
 108         },
 109
 110         disappear: function(){
 111                 this.fx.options.transition = this.options.transitionEnd;
 112                 this.fx.custom(this.fx.now, 0);
 113         }
 114
 115 });