library/tiptip/jquery.tipTip.js

   1 /*!
   2  * TipTip
   3  * Copyright 2010 Drew Wilson
   4  * www.drewwilson.com
   5  * code.drewwilson.com/entry/tiptip-jquery-plugin
   6  *
   7  * Version 1.3   -   Updated: Mar. 23, 2010
   8  *
   9  * This Plug-In will create a custom tooltip to replace the default
  10  * browser tooltip. It is extremely lightweight and very smart in
  11  * that it detects the edges of the browser window and will make sure
  12  * the tooltip stays within the current window size. As a result the
  13  * tooltip will adjust itself to be displayed above, below, to the left
  14  * or to the right depending on what is necessary to stay within the
  15  * browser window. It is completely customizable as well via CSS.
  16  *
  17  * This TipTip jQuery plug-in is dual licensed under the MIT and GPL licenses:
  18  *   http://www.opensource.org/licenses/mit-license.php
  19  *   http://www.gnu.org/licenses/gpl.html
  20  */
  21
  22 (function($){
  23         $.fn.tipTip = function(options) {
  24                 var defaults = {
  25                         activation: "hover",
  26                         keepAlive: false,
  27                         maxWidth: "200px",
  28                         edgeOffset: 3,
  29                         defaultPosition: "bottom",
  30                         delay: 400,
  31                         fadeIn: 200,
  32                         fadeOut: 200,
  33                         attribute: "title",
  34                         content: false, // HTML or String to fill TipTIp with
  35                         enter: function(){},
  36                         exit: function(){}
  37                 };
  38                 var opts = $.extend(defaults, options);
  39
  40                 // Setup tip tip elements and render them to the DOM
  41                 if($("#tiptip_holder").length <= 0){
  42                         var tiptip_holder = $('<div id="tiptip_holder" style="max-width:'+ opts.maxWidth +';"></div>');
  43                         var tiptip_content = $('<div id="tiptip_content"></div>');
  44                         var tiptip_arrow = $('<div id="tiptip_arrow"></div>');
  45                         $("body").append(tiptip_holder.html(tiptip_content).prepend(tiptip_arrow.html('<div id="tiptip_arrow_inner"></div>')));
  46                 } else {
  47                         var tiptip_holder = $("#tiptip_holder");
  48                         var tiptip_content = $("#tiptip_content");
  49                         var tiptip_arrow = $("#tiptip_arrow");
  50                 }
  51
  52                 return this.each(function(){
  53                         var org_elem = $(this);
  54                         if(opts.content){
  55                                 var org_title = opts.content;
  56                         } else {
  57                                 var org_title = org_elem.attr(opts.attribute);
  58                         }
  59                         if(org_title && org_title != ""){
  60                                 if(!opts.content){
  61                                         org_elem.removeAttr(opts.attribute); //remove original Attribute
  62                                 }
  63                                 var timeout = false;
  64
  65                                 if(opts.activation == "hover"){
  66                                         org_elem.hover(function(){
  67                                                 active_tiptip();
  68                                         }, function(){
  69                                                 if(!opts.keepAlive){
  70                                                         deactive_tiptip();
  71                                                 }
  72                                         });
  73                                         if(opts.keepAlive){
  74                                                 tiptip_holder.hover(function(){}, function(){
  75                                                         deactive_tiptip();
  76                                                 });
  77                                         }
  78                                 } else if(opts.activation == "focus"){
  79                                         org_elem.focus(function(){
  80                                                 active_tiptip();
  81                                         }).blur(function(){
  82                                                 deactive_tiptip();
  83                                         });
  84                                 } else if(opts.activation == "click"){
  85                                         org_elem.click(function(){
  86                                                 active_tiptip();
  87                                                 return false;
  88                                         }).hover(function(){},function(){
  89                                                 if(!opts.keepAlive){
  90                                                         deactive_tiptip();
  91                                                 }
  92                                         });
  93                                         if(opts.keepAlive){
  94                                                 tiptip_holder.hover(function(){}, function(){
  95                                                         deactive_tiptip();
  96                                                 });
  97                                         }
  98                                 }
  99
 100                                 function active_tiptip(){
 101                                         opts.enter.call(this);
 102                                         tiptip_content.html(org_title);
 103                                         tiptip_holder.hide().removeAttr("class").css("margin","0");
 104                                         tiptip_arrow.removeAttr("style");
 105
 106                                         var top = parseInt(org_elem.offset()['top']);
 107                                         var left = parseInt(org_elem.offset()['left']);
 108                                         var org_width = parseInt(org_elem.outerWidth());
 109                                         var org_height = parseInt(org_elem.outerHeight());
 110                                         var tip_w = tiptip_holder.outerWidth();
 111                                         var tip_h = tiptip_holder.outerHeight();
 112                                         var w_compare = Math.round((org_width - tip_w) / 2);
 113                                         var h_compare = Math.round((org_height - tip_h) / 2);
 114                                         var marg_left = Math.round(left + w_compare);
 115                                         var marg_top = Math.round(top + org_height + opts.edgeOffset);
 116                                         var t_class = "";
 117                                         var arrow_top = "";
 118                                         var arrow_left = Math.round(tip_w - 12) / 2;
 119
 120                     if(opts.defaultPosition == "bottom"){
 121                         t_class = "_bottom";
 122                         } else if(opts.defaultPosition == "top"){
 123                                 t_class = "_top";
 124                         } else if(opts.defaultPosition == "left"){
 125                                 t_class = "_left";
 126                         } else if(opts.defaultPosition == "right"){
 127                                 t_class = "_right";
 128                         }
 129
 130                                         var right_compare = (w_compare + left) < parseInt($(window).scrollLeft());
 131                                         var left_compare = (tip_w + left) > parseInt($(window).width());
 132
 133                                         if((right_compare && w_compare < 0) || (t_class == "_right" && !left_compare) || (t_class == "_left" && left < (tip_w + opts.edgeOffset + 5))){
 134                                                 t_class = "_right";
 135                                                 arrow_top = Math.round(tip_h - 13) / 2;
 136                                                 arrow_left = -12;
 137                                                 marg_left = Math.round(left + org_width + opts.edgeOffset);
 138                                                 marg_top = Math.round(top + h_compare);
 139                                         } else if((left_compare && w_compare < 0) || (t_class == "_left" && !right_compare)){
 140                                                 t_class = "_left";
 141                                                 arrow_top = Math.round(tip_h - 13) / 2;
 142                                                 arrow_left =  Math.round(tip_w);
 143                                                 marg_left = Math.round(left - (tip_w + opts.edgeOffset + 5));
 144                                                 marg_top = Math.round(top + h_compare);
 145                                         }
 146
 147                                         var top_compare = (top + org_height + opts.edgeOffset + tip_h + 8) > parseInt($(window).height() + $(window).scrollTop());
 148                                         var bottom_compare = ((top + org_height) - (opts.edgeOffset + tip_h + 8)) < 0;
 149
 150                                         if(top_compare || (t_class == "_bottom" && top_compare) || (t_class == "_top" && !bottom_compare)){
 151                                                 if(t_class == "_top" || t_class == "_bottom"){
 152                                                         t_class = "_top";
 153                                                 } else {
 154                                                         t_class = t_class+"_top";
 155                                                 }
 156                                                 arrow_top = tip_h;
 157                                                 marg_top = Math.round(top - (tip_h + 5 + opts.edgeOffset));
 158                                         } else if(bottom_compare | (t_class == "_top" && bottom_compare) || (t_class == "_bottom" && !top_compare)){
 159                                                 if(t_class == "_top" || t_class == "_bottom"){
 160                                                         t_class = "_bottom";
 161                                                 } else {
 162                                                         t_class = t_class+"_bottom";
 163                                                 }
 164                                                 arrow_top = -12;
 165                                                 marg_top = Math.round(top + org_height + opts.edgeOffset);
 166                                         }
 167
 168                                         if(t_class == "_right_top" || t_class == "_left_top"){
 169                                                 marg_top = marg_top + 5;
 170                                         } else if(t_class == "_right_bottom" || t_class == "_left_bottom"){
 171                                                 marg_top = marg_top - 5;
 172                                         }
 173                                         if(t_class == "_left_top" || t_class == "_left_bottom"){
 174                                                 marg_left = marg_left + 5;
 175                                         }
 176                                         tiptip_arrow.css({"margin-left": arrow_left+"px", "margin-top": arrow_top+"px"});
 177                                         tiptip_holder.css({"margin-left": marg_left+"px", "margin-top": marg_top+"px"}).attr("class","tip"+t_class);
 178
 179                                         if (timeout){ clearTimeout(timeout); }
 180                                         timeout = setTimeout(function(){ tiptip_holder.stop(true,true).fadeIn(opts.fadeIn); }, opts.delay);
 181                                 }
 182
 183                                 function deactive_tiptip(){
 184                                         opts.exit.call(this);
 185                                         if (timeout){ clearTimeout(timeout); }
 186                                         tiptip_holder.fadeOut(opts.fadeOut);
 187                                 }
 188                         }
 189                 });
 190         }
 191 })(jQuery);