This website uses cookies to personalise ads and to analyse traffic ok
web design

Style-my-tooltips jQuery plugin

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
Tooltip follows cursor when hovering an element, values: true, false
tip_delay_time: Integer
Tooltip delay before displaying, value in milliseconds
tip_fade_speed: Integer
Tooltip fade in/out speed, value in milliseconds
attribute: String
Tooltip text source. Set an alternative attribute as source of the tooltip text (default is “title”)

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;
}

Changelog

  • Jul 25, 2012
    • Added new attribute option for setting tolltip source.
      Minor code optimizations.
  • Jun 8, 2012
    • Complete plugin update. I’ve taken user input and feedback and re-wrote and optimized the code significantly. Changes include:
      Plugin automatically applies to dynamically generated elements.
      Tooltip default position is exactly like the browser’s native tooltips.
      Fixed all bugs regarding tooltip position when scrolling the page and hovering fixed or absolute elements. The tooltip is now always visible and correctly positioned.
      After extensive testing, elements original title attributes are re-applied on mouseout, click and mousedown events. With the added mousedown event, you can use the plugin along with complex web apps and pages.
  • Feb 7, 2012
    • Minor change in code to better position the tooltip.

License

This work is released under the MIT License.
You are free to use, study, improve and modify it wherever and however you like.
https://opensource.org/licenses/MIT


103 Comments

Post a comment

Comments pages: 1 2 3

  1. Ricky
    Posted on May 10, 2016 at 02:23 Permalink

    is it possible to add line-breaks the title text? I need several line-breaks in is I have about 300 lines similar to this one

    Reply

Comments pages: 1 2 3

Post a comment

Cancel reply

Your e-mail is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
You can write or copy/paste code directly in your comment using the <code> tag:
<code>code here...</code>
You may also use the data-lang attribute to determine the code language like so:
<code data-lang-html>, <code data-lang-css>, <code data-lang-js> and <code data-lang-php>

css.php