include/javascript/jquery/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 != ""){
  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
  79                                         org_elem.click(function(){
  80                                                 deactive_tiptip();
  81                                                 //return false;
  82                                         });
  83                                 } else if(opts.activation == "focus"){
  84                                         org_elem.focus(function(){
  85                                                 active_tiptip();
  86                                         }).blur(function(){
  87                                                 deactive_tiptip();
  88                                         });
  89                                 } else if(opts.activation == "click"){
  90                                         org_elem.click(function(){
  91                                                 active_tiptip();
  92                                                 return false;
  93                                         }).hover(function(){},function(){
  94                                                 if(!opts.keepAlive){
  95                                                         deactive_tiptip();
  96                                                 }
  97                                         });
  98                                         if(opts.keepAlive){
  99                                                 tiptip_holder.hover(function(){}, function(){
 100                                                         deactive_tiptip();
 101                                                 });
 102                                         }
 103                                 }
 104
 105                                 function active_tiptip(){
 106                                         opts.enter.call(this);
 107                                         tiptip_content.html(org_title);
 108                                         tiptip_holder.hide().removeAttr("class").css("margin","0");
 109                                         tiptip_arrow.removeAttr("style");
 110
 111                                         var top = parseInt(org_elem.offset()['top']);
 112                                         var left = parseInt(org_elem.offset()['left']);
 113                                         var org_width = parseInt(org_elem.outerWidth());
 114                                         var org_height = parseInt(org_elem.outerHeight());
 115                                         var tip_w = tiptip_holder.outerWidth();
 116                                         var tip_h = tiptip_holder.outerHeight();
 117                                         var w_compare = Math.round((org_width - tip_w) / 2);
 118                                         var h_compare = Math.round((org_height - tip_h) / 2);
 119                                         var marg_left = Math.round(left + w_compare);
 120                                         var marg_top = Math.round(top + org_height + opts.edgeOffset);
 121                                         var t_class = "";
 122                                         var arrow_top = "";
 123                                         var arrow_left = Math.round(tip_w - 12) / 2;
 124
 125                     if(opts.defaultPosition == "bottom"){
 126                         t_class = "_bottom";
 127                         } else if(opts.defaultPosition == "top"){
 128                                 t_class = "_top";
 129                         } else if(opts.defaultPosition == "left"){
 130                                 t_class = "_left";
 131                         } else if(opts.defaultPosition == "right"){
 132                                 t_class = "_right";
 133                         }
 134
 135                                         var right_compare = (w_compare + left) < parseInt($(window).scrollLeft());
 136                                         var left_compare = (tip_w + left) > parseInt($(window).width());
 137
 138                                         if((right_compare && w_compare < 0) || (t_class == "_right" && !left_compare) || (t_class == "_left" && left < (tip_w + opts.edgeOffset + 5))){
 139                                                 t_class = "_right";
 140                                                 arrow_top = -12;
 141                                                 arrow_left = 1;
 142                                                 marg_left = Math.round(left);
 143                                                 //marg_top = Math.round(top + h_compare);
 144                                         } else if((left_compare && w_compare < 0) || (t_class == "_left" && !right_compare)){
 145                                                 t_class = "_left";
 146                                                 arrow_top = -12;
 147                                                 arrow_left =  Math.round(tip_w - 13);
 148                                                 marg_left = Math.round((left + (org_width/2)) - (tip_w) + 5);
 149                                         }
 150
 151                                         var top_compare = (top + org_height + opts.edgeOffset + tip_h + 8) > parseInt($(window).height() + $(window).scrollTop());
 152                                         var bottom_compare = ((top + org_height) - (opts.edgeOffset + tip_h + 8)) < 0;
 153
 154                                         if(top_compare || (t_class == "_bottom" && top_compare) || (t_class == "_top" && !bottom_compare) || opts.defaultPosition == 'top'){
 155                                                 if(t_class == "_top" || t_class == "_bottom"){
 156                                                         t_class = "_top";
 157                                                 } else {
 158                                                         t_class = t_class+"_top";
 159                                                 }
 160                                                 arrow_top = tip_h;
 161                                                 marg_top = Math.round(top - (tip_h + 5 + opts.edgeOffset));
 162                                         } else if(bottom_compare | (t_class == "_top" && bottom_compare) || (t_class == "_bottom" && !top_compare)){
 163                                                 if(t_class == "_top" || t_class == "_bottom"){
 164                                                         t_class = "_bottom";
 165                                                 } else {
 166                                                         t_class = t_class+"_bottom";
 167                                                 }
 168                                                 arrow_top = -12;
 169                                                 marg_top = Math.round(top + org_height + opts.edgeOffset);
 170                                         }
 171
 172                                         if(t_class == "_right_top" || t_class == "_left_top"){
 173                                                 marg_top = marg_top + 5;
 174                                         } else if(t_class == "_right_bottom" || t_class == "_left_bottom"){
 175                                                 marg_top = marg_top - 5;
 176                                         }
 177                                         if(t_class == "_left_top" || t_class == "_left_bottom"){
 178                                                 //marg_left = marg_left + 5;
 179                                         }
 180                                         tiptip_arrow.css({"margin-left": arrow_left+"px", "margin-top": arrow_top+"px"});
 181                                         tiptip_holder.css({"margin-left": marg_left+"px", "margin-top": marg_top+"px"}).attr("class","tip"+t_class);
 182
 183                                         if (timeout){ clearTimeout(timeout); }
 184                                         timeout = setTimeout(function(){ tiptip_holder.stop(true,true).fadeIn(opts.fadeIn); }, opts.delay);
 185                                 }
 186
 187                                 function deactive_tiptip(){
 188                                         opts.exit.call(this);
 189                                         if (timeout){ clearTimeout(timeout); }
 190                                         tiptip_holder.fadeOut(opts.fadeOut);
 191                                 }
 192                         }
 193                 });
 194         }
 195 })(jQuery);