Style-my-tooltips jQuery plugin

A simple jQuery plugin to better style native browser tooltips.


Small in size (3kb unminified) script to enhance the look of tooltips. It works just like browser’s native tooltips with few options and styling via CSS. By default, the script applies to any element with a “title” attribute like links, paragraphs, images etc. but you can easily set it to affect only specific classes.


02/07/2012 – Did a minor change in the code to better position the tooltip (demo and download archive are updated).
The code
The styling of tooltips is done via the style-my-tooltips.css file. On this demo I used some CSS3 for rounded corners.

#s-m-t-tooltip{

position:absolute;

max-width:300px;

padding:6px 8px 8px 8px;

background:#222;

z-index:10;

display:inline-block; /*important*/

/*font*/

font-family:Verdana, Geneva, sans-serif;

font-size:11px;

line-height:16px;

color:#fff;

/*css3 rounded corners*/

-moz-border-radius:5px;

-khtml-border-radius:5px;

-webkit-border-radius:5px;

border-radius:5px;

}

The jquery.style-my-tooltips.js file

(function($){

$.fn.style_my_tooltips = function(options) {

var defaults = {

tip_follows_cursor: "on",

tip_delay_time: 1000

};

var options = $.extend(defaults, options);

$("body").append("

<div id="s-m-t-tooltip"></div>

"); //create the tooltip container

smtTip=$("#s-m-t-tooltip");

smtTip.hide(); //hide it

return this.each(function() {

function smtMouseMove(e){

smtMouseCoordsX=e.pageX;

smtMouseCoordsY=e.pageY;

smtTipPosition();

}

function smtTipPosition(){

var cursor_tip_margin_x=0; //horizontal space between the cursor and tooltip

var cursor_tip_margin_y=24; //vertical space between the cursor and tooltip

var leftOffset=smtMouseCoordsX+cursor_tip_margin_x+$(smtTip).outerWidth();

var topOffset=smtMouseCoordsY+cursor_tip_margin_y+$(smtTip).outerHeight();

if(leftOffset<=$(window).width()){

smtTip.css("left",smtMouseCoordsX+cursor_tip_margin_x);

} else {

var thePosX=smtMouseCoordsX-(cursor_tip_margin_x)-$(smtTip).width();

smtTip.css("left",thePosX);

}

if(topOffset<=$(window).height()){

smtTip.css("top",smtMouseCoordsY+cursor_tip_margin_y);

} else {

var thePosY=smtMouseCoordsY-(cursor_tip_margin_y)-$(smtTip).height();

smtTip.css("top",thePosY);

}

}

$(this).hover(function(e) {

// mouseover

var $this=$(this);

$this.data("smtTitle",$this.attr("title")); //store title

var theTitle=$this.data("smtTitle");

$this.attr("title",""); //remove title to prevent native tooltip showing

smtTip.empty().append(theTitle).hide(); //set tooltip text and hide it

smtTip_delay = setInterval(smtTip_fadeIn, options.tip_delay_time); //set tooltip delay

if(options.tip_follows_cursor=="off"){

smtMouseMove(e);

} else {

$(document).bind("mousemove", function(event){

smtMouseMove(event);

});

}

}, function() {

// mouseout

var $this=$(this);

if(options.tip_follows_cursor!="off"){

$(document).unbind("mousemove");

}

clearInterval(smtTip_delay);

if(smtTip.is(":animated")){

smtTip.hide();

} else {

smtTip.fadeTo("fast",0);

}

$this.attr("title",$this.data("smtTitle")); //add back title

});

$(this).click(function() {

var $this=$(this);

$this.attr("title",$this.data("smtTitle")); //add back title

});

function smtTip_fadeIn(){

smtTip.fadeTo("fast",1,function(){clearInterval(smtTip_delay);});

}

});

};

})(jQuery);

How to use it
All you need is to download the .zip file and extract the jquery.style-my-tooltips.js and style-my-tooltips.css on the same directory of your document, on which you must insert the following code inside the head tag.

<link href="style-my-tooltips.css" rel="stylesheet" type="text/css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>

<script src="jquery.style-my-tooltips.js" type="text/javascript"></script>

<script>

$().ready(function() {

$("[title]").style_my_tooltips({

tip_follows_cursor: "on", //on/off

tip_delay_time: 1000 //milliseconds

});

});

</script>

The code above affects all elements with a title attribute. If you want to apply the custom tooltip on elements with title that have a specific class (e.g. .myClassName) you change the selector as follows:

$(".myClassName[title]").style_my_tooltips({

tip_follows_cursor: "on", //on/off

tip_delay_time: 1000 //milliseconds

});

You can set the tooltip delay time and behavior via the two options.