Guest User

Untitled

a guest
Dec 4th, 2013
412
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  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.        
  24.        
  25.         var methods = {
  26.                         init: function(options) {
  27.                                 var defaults = {
  28.                                         activation: "hover",
  29.                                         keepAlive: false,
  30.                                         maxWidth: "200px",
  31.                                         edgeOffset: 3,
  32.                                         defaultPosition: "bottom",
  33.                                         delay: 400,
  34.                                         fadeIn: 200,
  35.                                         fadeOut: 200,
  36.                                         attribute: "title",
  37.                                         content: false, // HTML or String to fill TipTIp with
  38.                                         enter: function(){},
  39.                                         exit: function(){}
  40.                                 };
  41.                                 var opts = $.extend(defaults, options);
  42.                                
  43.                                 if($("#tiptip_holder").length <= 0){
  44.                                         var tiptip_holder = $('<div id="tiptip_holder" style="max-width:'+ opts.maxWidth +';"></div>'),
  45.                                                 tiptip_content = $('<div />', {id: 'tiptip_content'}),
  46.                                                 tiptip_arrow = $('<div />', { id: 'tiptip_arrow'});
  47.                                        
  48.                                         $("body").append(tiptip_holder.html(tiptip_content).prepend(tiptip_arrow.html('<div id="tiptip_arrow_inner"></div>')));
  49.                                 } else {
  50.                                         var tiptip_holder = $("#tiptip_holder"),
  51.                                                 tiptip_content = $("#tiptip_content"),
  52.                                                 tiptip_arrow = $("#tiptip_arrow");
  53.                                 }
  54.                                
  55.                                 return this.each(function(){
  56.                                         var org_elem = $(this);
  57.                                         if(opts.content){
  58.                                                 var org_title = opts.content;
  59.                                         } else {
  60.                                                 var org_title = org_elem.attr(opts.attribute);
  61.                                         }
  62.                                         if(org_title != ""){
  63.                                                
  64.                                                 var timeout = false;
  65.                                
  66.                                                 if(opts.activation == "hover"){
  67.                                        
  68.                                                         org_elem.on('mouseenter.tip mouseleave.tip', function(e){
  69.                                                                 if(e.type === 'mouseenter'){
  70.                                                                         active_tiptip();
  71.                                                                 }else{
  72.                                                                         if(!opts.keepAlive){
  73.                                                                                 deactive_tiptip();
  74.                                                                         }
  75.                                                                 }
  76.                                                         });
  77.                                                         if(opts.keepAlive){
  78.                                                                 tiptip_holder.hover(function(){}, function(){
  79.                                                                         deactive_tiptip();
  80.                                                                 });
  81.                                                         }
  82.                                                 } else if(opts.activation == "focus"){
  83.                                                         org_elem.on('focus.tip', function(){
  84.                                                                 active_tiptip();
  85.                                                         }).on('blur.tip', function(){
  86.                                                                 deactive_tiptip();
  87.                                                         });
  88.                                                 } else if(opts.activation == "click"){
  89.                                                         org_elem.on('click.tip', function(){
  90.                                                                 active_tiptip();
  91.                                                                 return false;
  92.                                                         }).on('mouseleave.tip', function(){
  93.                                                                 if(!opts.keepAlive){
  94.                                                                         deactive_tiptip();
  95.                                                                 }
  96.                                                         });
  97.                                                         if(opts.keepAlive){
  98.                                                                 tiptip_holder.hover(function(){}, function(){
  99.                                                                         deactive_tiptip();
  100.                                                                 });
  101.                                                         }
  102.                                                 }
  103.                        
  104.                                                 function active_tiptip(){
  105.                                                         opts.enter.call(this);
  106.                                                         tiptip_content.html(org_title);
  107.                                                         tiptip_holder.hide().removeAttr("class").css("margin","0");
  108.                                                         tiptip_arrow.removeAttr("style");
  109.                                        
  110.                                                         var top = parseInt(org_elem.offset()['top']),
  111.                                                                 left = parseInt(org_elem.offset()['left']),
  112.                                                                 org_width = parseInt(org_elem.outerWidth()),
  113.                                                                 org_height = parseInt(org_elem.outerHeight()),
  114.                                                                 tip_w = tiptip_holder.outerWidth(),
  115.                                                                 tip_h = tiptip_holder.outerHeight(),
  116.                                                                 w_compare = Math.round((org_width - tip_w) / 2),
  117.                                                                 h_compare = Math.round((org_height - tip_h) / 2),
  118.                                                                 marg_left = Math.round(left + w_compare),
  119.                                                                 marg_top = Math.round(top + org_height + opts.edgeOffset),
  120.                                                                 t_class = "",
  121.                                                                 arrow_top = "",
  122.                                                                 arrow_left = Math.round(tip_w - 12) / 2;
  123.  
  124.                                     if(opts.defaultPosition == "bottom"){
  125.                                         t_class = "_bottom";
  126.                                         } else if(opts.defaultPosition == "top"){
  127.                                                 t_class = "_top";
  128.                                         } else if(opts.defaultPosition == "left"){
  129.                                                 t_class = "_left";
  130.                                         } else if(opts.defaultPosition == "right"){
  131.                                                 t_class = "_right";
  132.                                         }
  133.                                        
  134.                                                         var right_compare = (w_compare + left) < parseInt($(window).scrollLeft()),
  135.                                                                 left_compare = (tip_w + left) > parseInt($(window).width());
  136.                                        
  137.                                                         if((right_compare && w_compare < 0) || (t_class == "_right" && !left_compare) || (t_class == "_left" && left < (tip_w + opts.edgeOffset + 5))){
  138.                                                                 t_class = "_right";
  139.                                                                 arrow_top = Math.round(tip_h - 13) / 2;
  140.                                                                 arrow_left = -12;
  141.                                                                 marg_left = Math.round(left + org_width + opts.edgeOffset);
  142.                                                                 marg_top = Math.round(top + h_compare);
  143.                                                         } else if((left_compare && w_compare < 0) || (t_class == "_left" && !right_compare)){
  144.                                                                 t_class = "_left";
  145.                                                                 arrow_top = Math.round(tip_h - 13) / 2;
  146.                                                                 arrow_left =  Math.round(tip_w);
  147.                                                                 marg_left = Math.round(left - (tip_w + opts.edgeOffset + 5));
  148.                                                                 marg_top = Math.round(top + h_compare);
  149.                                                         }
  150.  
  151.                                                         var top_compare = (top + org_height + opts.edgeOffset + tip_h + 8) > parseInt($(window).height() + $(window).scrollTop()),
  152.                                                                 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)){
  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, "margin-top": arrow_top});
  181.                                                         tiptip_holder.css({"margin-left": marg_left, "margin-top": marg_top}).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.                         destroy: function(options) {
  196.                                 return $(this).each(function() {
  197.                     $(this).off('.tip');
  198.                                 });
  199.                         }
  200.         };
  201.        
  202.         $.fn.tipTip = function() {
  203.                 var method = arguments[0];
  204.  
  205.                 if(methods[method]) {
  206.                         method = methods[method];
  207.                         arguments = Array.prototype.slice.call(arguments, 1);
  208.                 } else if( typeof(method) == 'object' || !method ) {
  209.                         method = methods.init;
  210.                 } else {
  211.                         return this;
  212.                 }
  213.  
  214.                 return method.apply(this, arguments);
  215.         }
  216. })(jQuery);
Advertisement
Add Comment
Please, Sign In to add comment