Advertisement
tasty2punch

tooltips with line breaks chyeah

Oct 20th, 2013
144
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. //style-my-tootltips by malihu (http://manos.malihu.gr)
  2. //plugin home http://manos.malihu.gr/style-my-tooltips-jquery-plugin
  3. (function($){
  4.     var methods={
  5.         init:function(options){
  6.             var defaults={
  7.                 tip_follows_cursor:false, //tooltip follows cursor: boolean
  8.                 tip_delay_time:700, //tooltip delay before displaying: milliseconds
  9.                 tip_fade_speed:300, //tooltip fade in/out speed: milliseconds
  10.                 attribute:"title" //tooltip text come from this attribute
  11.             },
  12.             options=$.extend(defaults,options);
  13.             if($("#s-m-t-tooltip").length===0){
  14.                 $("body").append("<div id='s-m-t-tooltip'><div></div></div>");
  15.             }
  16.             var smtTooltip=$("#s-m-t-tooltip");
  17.             smtTooltip.css({"position":"absolute","display":"none"}).data("smt-z-index",smtTooltip.css("z-index")).children("div").css({"width":"100%","height":"100%"});
  18.             function smtGetCursorCoords(event){
  19.                 var smtCursorCoordsX=event.pageX,
  20.                     smtCursorCoordsY=event.pageY;
  21.                 smtTooltip.style_my_tooltips("position",{
  22.                     smtCursorCoordsX:smtCursorCoordsX,
  23.                     smtCursorCoordsY:smtCursorCoordsY
  24.                 });
  25.             }
  26.             $(".smt-current-element").live("mouseout mousedown click",function(){
  27.                 var $this=$(this);
  28.                 clearTimeout(smtTooltip_delay);
  29.                 smtTooltip.style_my_tooltips("hide",{
  30.                     speed:$this.data("smt-fade-speed")
  31.                 });
  32.                 $(document).unbind("mousemove");
  33.                 $this.removeClass("smt-current-element");
  34.                 if($this.attr(options.attribute)===""){
  35.                     $this.attr(options.attribute,$this.data("smt-title"));
  36.                 }
  37.             });
  38.             return this["live"]("mouseover",function(event){
  39.                 var $this=$(this),
  40.                     title=$this.attr(options.attribute);
  41.                 $this.addClass("smt-current-element").data({"smt-title":title,"smt-fade-speed":options.tip_fade_speed}).attr(options.attribute,"");
  42.                 smtTooltip.style_my_tooltips("update",{
  43.                     title:title,
  44.                     speed:options.tip_fade_speed,
  45.                     delay:options.tip_delay_time,
  46.                     tip_follows_cursor:options.tip_follows_cursor
  47.                 });
  48.                 $(document).bind("mousemove", function(event){
  49.                     smtGetCursorCoords(event);
  50.                 });
  51.             });
  52.         },
  53.         update:function(options){
  54.             var $this=$(this);
  55.             $this.stop().css({"display":"none","z-index":$this.data("smt-z-index")}).children("div").html(options.title);
  56.             smtTooltip_delay=setTimeout(function(){
  57.                 $this.style_my_tooltips("show",{
  58.                     speed:options.speed,
  59.                     tip_follows_cursor:options.tip_follows_cursor
  60.                 })
  61.             }, options.delay);
  62.         },
  63.         show:function(options){
  64.             var $this=$(this);
  65.             $this.stop().fadeTo(options.speed,1);
  66.             if(!options.tip_follows_cursor){
  67.                 $(document).unbind("mousemove");
  68.             }
  69.         },
  70.         hide:function(options){
  71.             var $this=$(this);
  72.             $this.stop().fadeTo(options.speed,0,function(){
  73.                 $this.css({"z-index":"-1"});
  74.             });
  75.         },
  76.         position:function(options){
  77.             var $this=$(this),
  78.                 winScrollX=$(window).scrollLeft(),
  79.                 winScrollY=$(window).scrollTop(),
  80.                 tipWidth=$this.outerWidth(true),
  81.                 tipHeight=$this.outerHeight(true),
  82.                 leftOffset=(options.smtCursorCoordsX+tipWidth)-winScrollX,
  83.                 topOffset=(options.smtCursorCoordsY+tipHeight)-winScrollY;
  84.             if(leftOffset<=$(window).width() && leftOffset<=$(document).width()){
  85.                 $this.css("left",options.smtCursorCoordsX);
  86.             }else{
  87.                 var thePosX=options.smtCursorCoordsX-tipWidth;
  88.                 if(thePosX>=winScrollX){
  89.                     $this.css("left",thePosX);
  90.                 }else{
  91.                     $this.css("left",winScrollX);
  92.                 }
  93.             }
  94.             if(topOffset<=$(window).height() && topOffset<=$(document).height()){
  95.                 $this.css("top",options.smtCursorCoordsY);
  96.             }else{
  97.                 var thePosY=options.smtCursorCoordsY-tipHeight;
  98.                 if(thePosY>=winScrollY){
  99.                     $this.css("top",thePosY);
  100.                 }else{
  101.                     $this.css("top",winScrollY);
  102.                 }
  103.             }
  104.         }
  105.     }
  106.     $.fn.style_my_tooltips=function(method){
  107.         if(methods[method]){
  108.             return methods[method].apply(this,Array.prototype.slice.call(arguments,1));
  109.         }else if(typeof method==="object" || !method){
  110.             return methods.init.apply(this,arguments);
  111.         }else{
  112.             $.error("Method "+method+" does not exist");
  113.         }
  114.     };
  115. })(jQuery);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement