Style-my-tooltips jQuery plugin

A simple, lightweight jQuery plugin to enhance the look of browser tooltips. Small in size (4kb unminified) script that works just like browser’s native tooltips with few options and styling via CSS. If you ever wished for altering the default look of browser tooltips for your project, read on!

Style-my-toolips does exactly what its title says: styles browser default tooltips. The javascript generated tooltip behaves and functions exactly like browser’s native tooltip, meaning it is always visible within the viewport and its position is relevant to cursor position. Please note that this is not a fixed positioned modal pop-up tooltip. You cannot insert html code in it (links, images etc.). The script gets elements with title attribute and generates tooltips with the attribute text.

How to use it

Download the archive which contains the plugin files and demo. Extract files and upload jquery.style-my-tooltips.js and style-my-tooltips.css to your web server.

Include style-my-tooltips.css inside the head tag your html document

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

Include jquery and jquery.style-my-tooltips.js in your html document

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="jquery.style-my-tooltips.js"></script>

The code above can be inserted inside the head tag or at the very bottom of your document, before the closing body tag (which is normally recommended for better performance). In either case, it’s more efficient to include css files before any javascript (usually inside the head tag). As usual, we’re using Google’s CDN to get the jquery library.

What these files do

jquery is the javascript library used by the plugin (info: jquery.com).

jquery.style-my-tooltips.js is our plugin file

style-my-tooltips.css is the css file we use to style our tooltips. You could of course put the tooltip styling in your main stylesheet document to reduce http requests.

Call style_my_tooltips function on document ready (after the inclusion of the plugin files), either in the head or body tag

<script>
    (function($){
        $(document).ready(function(){
            $("[title]").style_my_tooltips();
        });
    })(jQuery);
</script>

Note that we’re wrapping our jquery code with (function($){ ... })(jQuery);. This ensures no conflict between jquery and other libraries using $ shortcut. See Using jQuery with Other Libraries for more info. Calling our function on document ready ($(document).ready()) is the standard, most common way used. It roughly means that our code will execute after the DOM is ready.

The [title] selector means that the plugin will apply to any element with title attribute (e.g. <a href="#" title="Link title">link</a>).

You can change the function call selector to anything you want (an id, class name etc.). For instance, to apply the custom tooltip on elements with title attribute that have a specific class (e.g. .myClassName) you change the selector as follows:

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

You can also have multiple selectors by inserting comma separated values. For example the following applies only to anchor and image elements with title attribute:

$("a[title],img[title]").style_my_tooltips();

That’s all you need to use the plugin.

Configuration

style_my_tooltips function can get the following option parameters in order to customize its behavior and basic functionality:

tip_follows_cursor: Boolean

tip_delay_time: Integer

tip_fade_speed: Integer

attribute: String

An example of defining these options parameters and their default values is as follows

$("[title]").style_my_tooltips({ 
    tip_follows_cursor:false,
    tip_delay_time:700,
    tip_fade_speed:300,
    attribute:"title"
});

I’ve set the default values to simulate the exact behavior of native browser tooltips.

Styling your tooltip

You can style the tooltip via the style-my-tooltips.css file. The css below is the default one you can see on the demo.

#s-m-t-tooltip{
  /* basic */
  max-width:300px;
  z-index:10;
  margin:24px 14px 7px 12px;
  /* style and design */
  padding:8px;
  background:#222; /* fallback if rgba not supported */
  background:rgba(0,0,0,0.8);
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  border-radius:3px;
  -moz-box-shadow:2px 2px 0 rgba(0,0,0,0.15),-1px -1px 0 rgba(255,255,255,0.3);
  -webkit-box-shadow:2px 2px 0 rgba(0,0,0,0.15),-1px -1px 0 rgba(255,255,255,0.3);
  box-shadow:2px 2px 0 rgba(0,0,0,0.15),-1px -1px 0 rgba(255,255,255,0.3);
  /* font */
  font-family:Verdana,Geneva,sans-serif;
  font-size:11px;
  line-height:16px;
  color:#fff;
}

License

You are free to use, study, improve and modify this script wherever and however you like.
All works are licensed under GNU General Public License, GNU Lesser General Public License or Creative Commons Attribution 3.0 Unported License.

Donating helps greatly in developing and updating free software and running this blog :)