Zebra_Tooltips, a lightweight tooltips jQuery plugin

Get the latest updates on this jQuery plugin via RSS

Zebra_Tooltips is a lightweight (around 6KB minified, 1.6KB gzipped) tooltip jQuery plugin for creating simple but smart and visually attractive tooltips, featuring nice transitions, and offering a wide range of configuration options. The library detects the edges of the browser window and makes sure that the tooltips always stay in the visible area of the browser window by placing them beneath or above the elements, and shifting them left or right so that the tooltips are always visible.

Besides the default behavior of tooltips showing when user hovers the element, tooltips may also be shown and hidden programmatically using the API. When shown programmatically, the tooltips will feature a “close” button and clicking it will be the only way of closing tooltips opened this way. This is very useful for drawing users’ attention to specific areas of a website.

By default, Zebra_Tooltips will use the “title” attribute of the element for the tooltip’s content, but the tooltip’s content can also be specified via the “zebra-tooltip” data attribute, or programmatically. Tooltips’ appearance can be easily customized both through JavaScript and/or CSS. Also, tooltips can be aligned left, center or right, relative to the parent element.

Zebra_Tooltips uses NO IMAGES (everything is handled from CSS), and falls back gracefully for browsers that don’t support all the fancy stuff; also, tooltips can be attached to any element not just anchor tags!

Works in all major browsers (Firefox, Opera, Safari, Chrome, Internet Explorer 6+)

Features

  • lightweight (around 6KB minified, 1.6KB gzipped)
  • features nice transitions
  • detects the edges of the browser window and makes sure that the tooltips always stay in the visible area of the browser window by placing them beneath or above the elements and shifting them left or right so that the tooltips are always visible
  • tooltips may also be shown and hidden using the API
  • appearance can be easily customized both through JavaScript and/or CSS
  • tooltips can be aligned left, center or right relative to the parent element
  • uses NO IMAGES (everything is handled from CSS), and falls back gracefully for browsers that don’t support all the fancy stuff; also, tooltips can be attached to any element not just anchor tags!
  • can be attached to any element not just anchor
  • works in all major browsers (Firefox, Opera, Safari, Chrome, Internet Explorer 6+)

Top

Requirements

Zebra_Tooltips has no dependencies other than jQuery. The recommended jQuery version is 1.7+ (due to the fact that the library makes use of something that the previous versions of jQuery have done in a way that it it now deprecated in WebKit powered browsers)

Top

How to use

First, load the latest version of jQuery either from a local source or from a CDN.

Load the Zebra_Tooltip plugin

<script type="text/javascript" src="path/to/zebra_tooltip.js"></script>

Load the plugin’s CSS file

<link rel="stylesheet" href="path/to/zebra_tooltips.css" type="text/css">

Now, within the DOM-ready event do

$(document).ready(function() {

    // show tooltips for any element that has a class named "tooltips"
    // the content of the tooltip will be taken from the element's "title" attribute
    new $.Zebra_Tooltips($('.tooltips'));

 });

Demos

1. Basic usage

The HTML

<p>Lorem ipsum dolor sit amet consectetuer facilisis lacinia sapien ac et. Quis 
hendrerit neque congue pretium iaculis justo laoreet orci elit <a href="#" 
class="tooltips" title="Zebra_Tooltips is a lightweight (around 5KB minified, 1.6KB 
gzipped) tooltip jQuery plugin for creating simple, but smart and visually attractive 
tooltips, featuring nice transitions and offering a wide range of configuration 
options.">condimentum</a>. Eros natoque Curabitur accumsan eget quis porttitor 
Sed Vestibulum amet sed.</p>

The JavaScript

$(document).ready(function() {
    new $.Zebra_Tooltips($('.tooltips'));
});

The result

Lorem ipsum dolor sit amet consectetuer facilisis lacinia sapien ac et. Quis hendrerit neque congue
pretium iaculis justo laoreet orci elit condimentum. Eros natoque Curabitur accumsan eget quis porttitor Sed Vestibulum amet sed.

2. Custom colors

The HTML

<p>Lorem ipsum dolor sit amet consectetuer facilisis lacinia sapien ac et. Quis 
hendrerit neque congue pretium iaculis justo laoreet orci elit <a href="#" 
class="tooltips" title="Appearance can be easily customized both through JavaScript
and/or CSS. Also, tooltips can be aligned left, center or right relative to the 
parent element.">condimentum</a>. Eros natoque Curabitur accumsan eget quis 
porttitor Sed Vestibulum amet sed.</p>

The JavaScript

$(document).ready(function() {
    new $.Zebra_Tooltips($('.tooltips'), {
        'background_color': '#C40000',
        'color': '#FFF'
    });
});

The result

Lorem ipsum dolor sit amet consectetuer facilisis lacinia sapien ac et. Quis hendrerit neque congue
pretium iaculis justo laoreet orci elit condimentum. Eros natoque Curabitur accumsan eget quis porttitor Sed Vestibulum amet sed.

3. Align tooltips relative to the parent element

The HTML

<p>Lorem ipsum dolor sit amet consectetuer facilisis lacinia sapien ac et. Quis 
hendrerit neque congue pretium iaculis justo laoreet orci elit <a href="#" 
class="tooltips1" title="Hello! I am aligned to the left of the element. Also, my
width is different.">left</a>. Eros natoque Curabitur accumsan eget quis 
porttitor Sed Vestibulum amet sed. Lorem ipsum dolor sit amet consectetuer 
facilisis lacinia sapien ac et. Quis hendrerit neque congue pretium iaculis justo 
laoreet orci elit <a href="#" class="tooltips2" title="Hello! I am aligned to 
the right of the element. Also, my width is different.">right</a>. Eros natoque 
Curabitur accumsan eget quis porttitor Sed Vestibulum amet sed.</p>

The JavaScript

$(document).ready(function() {
    new $.Zebra_Tooltips($('.tooltips1'), {
        'position':     'left',
        'max_width':    300
    });

    new $.Zebra_Tooltips($('.tooltips2'), {
        'position': 'right',
        'max_width':    300
    });
});

The result

Lorem ipsum dolor sit amet consectetuer facilisis lacinia sapien ac et. Quis hendrerit neque congue pretium iaculis justo laoreet orci elit left. Eros natoque Curabitur accumsan eget quis porttitor Sed Vestibulum amet sed. Lorem ipsum dolor sit amet consectetuer facilisis lacinia sapien ac et. Quis hendrerit neque congue pretium iaculis justo laoreet orci elit right. Eros natoque Curabitur accumsan eget quis porttitor Sed Vestibulum amet sed.

4. Show tooltips programmatically

The HTML

<p>Lorem ipsum dolor sit amet consectetuer facilisis lacinia sapien ac et. Quis 
hendrerit neque congue pretium iaculis justo laoreet orci elit <a href="#" 
class="tooltips" title="Zebra_Tooltips makes use of NO IMAGES (everything is 
handled from CSS), and falls back gracefully for browsers that don't support all 
the fancy stuff; also tooltips can be attached to any element not just anchor 
tags!<br><br>Works in all major browsers (Firefox, Opera, Safari, Chrome, Internet 
Explorer 6+)">condimentum</a>. Eros natoque Curabitur accumsan eget quis 
porttitor Sed Vestibulum amet sed.</p>

The JavaScript

$(document).ready(function() {
    var zt = new $.Zebra_Tooltips($('.tooltips'));
    zt.show($('.tooltips'), true); // destroy on close
});

The result

Lorem ipsum dolor sit amet consectetuer facilisis lacinia sapien ac et. Quis hendrerit neque congue
pretium iaculis justo laoreet orci elit condimentum. Eros natoque Curabitur accumsan eget quis porttitor Sed Vestibulum amet sed.

 

Top

Configuration

All parameters are optional.

animation_speed integer

The speed (in milliseconds) of the animation used to show/hide tooltips. 

Default is 250

animation_offset integer

The number of pixels the tooltips should use to “slide” into position. 

Set to 0 for no sliding.

Default is 20.

background_color string

Tooltip’s background color. 

May be a hexadecimal color (like #BADA55) or a supported named color (like “limegreen”).

Default is #000

close_on_click boolean

By default, if the users clicks when over a tooltip, the tooltip will close (if the tooltip was not open using the API, that is). 

Set this property to FALSE to prevent this behaviour.

Default is TRUE

color string

Tooltip’s text color. 

May be a hexadecimal color (like #FFF) or a supported named color (like “white”).

Default is #FFF.

content string

The content of the tooltip. 

Usually, the content of the tooltip is given in the “title” attribute or as the “zebra-tooltip” data attribute of the element the tooltip is attached to.

Setting this property to FALSE will use the property’s value as the content of all the tooltips rather than using the values of the “title” or the data attribute.

Default is FALSE

default_position string

By default, tooltips are shown above the elements they are attached to and are shown below only if there isn’t enough space above.

Set the value of this property to “below” if you want to reverse the default behavior so that tooltips will be shown below the elements they are attached to and will be shown above only there isn’t enough space below.

Possible values are “above” and “below”.

Default is “above”

hide_delay integer

The delay (in milliseconds) after which to hide the tooltip once the mouse moves away from the trigger element or the tooltip. 

Default is 100.

keep_visible boolean

Should tooltips remain visible also when the mouse cursor is over the tooltips or should the tooltips be visible strictly when the mouse cursor is over the parent elements. 

Default is TRUE.

max_width integer

Maximum width of the tooltip’s content; 

Default is 250

opacity double

The tooltip’s opacity. 

Must be a value between 0 (completely transparent) and 1 (completely opaque)

Default is .85

position string

The tooltip’s position, relative to the trigger element. 

Can be any of the following:

– center
– left
– right

Default is “center”.

prerender boolean

If set to TRUE, tooltips will be created on document load, rather than only when needed. 

Default is FALSE.

show_delay integer

The delay (in milliseconds) after which to show the tooltip once the mouse is over the trigger element. 

Default is 100.

vertical_offset integer

How close (in pixels) should the tip of the tooltip be relative to the parent element. 

Default is 0.

Events

onBeforeHide  

Event fired before a tooltip is hidden. 

The callback function (if any) receives as argument the element the tooltip is attached to, and the tooltip element.

onHide  

Event fired after a tooltip is hidden. 

The callback function (if any) receives as argument the element the tooltip is attached to, and the tooltip element.

onBeforeShow  

Event fired before a tooltip is shown. 

The callback function (if any) receives as argument the element the tooltip is attached to, and the tooltip element.

onShow  

Event fired after a tooltip is shown. 

The callback function (if any) receives as argument the element the tooltip is attached to, and the tooltip element.

Public methods

show  

Shows the tooltip attached to the element or the elements given as argument. 

When showing a tooltip using this method, the tooltip can only be closed by the user clicking on the “close” icon on the tooltip (which is automatically added when using this method) or by calling the hide() method.

show(element, [destroy = FALSE])

where

element: An element or a collection of elements for which to show the attached tooltips.

destroy: (optional) If set to TRUE, once the user clicks the “close” button, the tooltip will be “muted” and will *not* be shown when the user hovers the parent element with the mouse.

In this case, the tooltip can be shown again only by calling this method.

If set to FALSE, the tooltip will be shown whenever the user hovers the parent element with the mouse, only it will not have the “close” button anymore.

Default is FALSE

var zt = new $.Zebra_Tooltips($('#tooltip'));
zt.show($('#tooltip'), true);
hide  

Hides the tooltip attached to the element or the elements given as argument. 

hide(element, [destroy = FALSE])

where

element: An element or a collection of elements for which to show the attached tooltips.

destroy: (optional) If set to TRUE, once hidden, the tooltip will be “muted” and will *not* be shown when the user hovers the parent element with the mouse.

In this case, the tooltip can be shown again only by calling the show() method.

Default is FALSE

var zt = new $.Zebra_Tooltips($('#tooltip'));
zt.hide($('#tooltip'));

Top 

Download

version 1.2.1
If you find this library to be useful to you, you can support the author by donating a small amount via PayPal:

Zebra_Tooltips is distributed under the LGPL.

In plain English, this means that you have the right to view and to modify the source code of this software, but if you modify and distribute it, you are required to license your copy under a LGPL-compatible license, and to make the entire source code of your derivation available to anybody you distribute the software to.

You also have the right to use this software together with software that has different licensing terms (including, but not limited to, commercial and closed-source software), and distribute the combined software, as long as state that your software contains portions licensed under the LGPL license, and provide information about where the LGPL licensed software can be downloaded.

If you distribute copies of this software you may not change the copyright or license of this software.


You may also like:

Top

Changelog

Click on a version to expand/collapse information.

version 1.2.1 (November 25, 2013)
  • fixed a bug where the “show” and “hide” methods were not accepting a jQuery selector as per documentation, but a single element; thanks to Martin for reporting;
  • fixed a bug with the “content” property, where its value was not used unless the “title” attribute was also set on the element the tooltip was attached to; thanks to Phill for reporting;
  • added a new “default_position” property useful if you want the tooltips to be positioned, by default, below the elements they are attached to and above only if there isn’t enough space below; before, tooltips were shown by default above the elements they were attached to and below only if there wasn’t enough above; thanks to Sebastian Popa for suggesting;
version 1.2.0 (October 18, 2013)
  • tooltip content can now also be set via the “zebra-tooltip” data attribute;
  • tooltips are not shown anymore if the title or the data attribute is empty;
  • all the callback functions now receive as second argument the tooltip element, allowing for on-the-fly customization;
  • minor code tweaks as suggested by JSHint;
version 1.1.0 (April 28, 2013)
  • a new property was added: “vertical_offset” which sets how close (in pixels) should the tip of the tooltip’s arrow be relative to the parent element; thanks Jason Lewis;
  • tooltip’s width can now be set when initializing the plugin;
  • fixed a bug where the tooltip was not having an animation the first time it was shown but only on subsequent appearances;
  • fixed a bug with the arrow’s container element, even though invisible, was larger than needed;
  • fixed a bug which broke the tooltip’s animation if, during it’s lifetime, a tooltip was shown above/below an element and then, because of scrolling or resizing, the tooltip had to be shown below/above the element;
  • fixed some positioning bugs when resizing the window or having scrollbars;
  • some optimizations and changes in the stylesheet file;
  • the project is now also available on GitHub
version 1.0.1 (May 11, 2012)
  • fixed a bug where in Internet Explorer 9 the arrow was sometimes not visible; thanks to Manfred and tolpi
version 1.0 (January 02, 2012)
  • initial release

Top

87 responses to “Zebra_Tooltips, a lightweight tooltips jQuery plugin”

Follow the comments via RSS
  • Martin, 2013-10-18, 16:31

    I would like to be able to show tooltips programmatically based upon the user clicking on an icon. Something like…

    I am trying the following…

    var zt = new $.Zebra_Tooltips($(".tooltip"), { 
      'position': 'right', 
      'background_color': 'Blue' 
    });
    zt.hide($(".tooltip"), true);
    
    $("a.help").click(function () {
      zt.hide($(".tooltip"), true);
      zt.show($(this).next(), true);
    });

    This almost works, but it always shows the first tooltip and the mouseover still activates the first time you hover over a field with a tooltip attached.

    Can you help?

    Reply
    • Martin, 2013-10-18, 16:34

      Sorry; formatting went totally wrong (did I miss something?)
      HTML…
      label …
      a class=”help”…
      input title=”my tooltip text”…

      JS…
      var zt = new $.Zebra_Tooltips($(“.tooltip”), { ‘position': ‘right’, ‘background_color': ‘Blue’ });
      zt.hide($(“.tooltip”), true);

      $(“a.help”).click(function () {
      zt.hide($(“.tooltip”), true);
      zt.show($(this).next(), true);
      });

    • Martin, 2013-10-18, 18:54

      It is ok; I have solved it.
      show and hide do not expect selectors; they are expecting single elements. I wrapped my calls to both with a jQuery each() and now it works.

  • Martin, 2013-10-18, 18:55

    Is it possible to have arrows on the left and/or right (left is more important) and then align the tooltip accordingly?

    Reply
    • Stefan Gabos, 2013-10-18, 21:28

      nope, that is not currently possible

  • Basti, 2013-11-21, 18:19

    Hello Stefan! First of all thanks for your work and sharing it here! Everything worked fine when i used your tooltip script.

    I have one question, is it possible to show the tooltip only above the word and not changing to show it below when there is not enough space above it.

    Is there a way to change the code for that? Would be a great help!

    Thank you very much,

    Basti

    Reply
  • kpc, 2013-12-09, 22:07

    I like this plugin so far but it would be nice if you fixed IE and FF max_width. Changing max_width doesn’t affect IE and FF, causes a word in one of my tips to kick down to a second line. In FF it’s even weirder, one tooltip with two words will kick down a word to a second line but another tooltip with three words won’t, and yet still another tooltip with three words will. The length of the words of the one with two words is not longer than either of the other two with three words. onMax_width works fine in Chrome. However, in Chrome the tooltip’s vertical_offset is different than FF, IE or Safari which are all about the same. It would be nice if you could work out cross browser compatibility issues.

    Reply
  • kpc, 2013-12-09, 23:13

    I really like your jquery plugin but there are some cross browser issues. Chrome on Windows 8.1 has the vertical_offset lower than on FF, Safari, and IE for Windows 8.1.

    Max_width doesn’t seem to be working for IE or FF because words are being forced down to a second line in my setup while in Safari and Chrome it takes the max_width and does not do the same.

    Reply
  • kpc, 2013-12-10, 01:15

    Hmmm, must have been a caching issue. I swear I cleared cache on all the testing and cross comparison I was doing. It seems to be working fine now in all four (FF, Chrome, Safari, IE). I was using Desktop Server when doing this. But, now they all work on a live server. This is very good!

    Reply
    • Stefan Gabos, 2013-12-10, 10:43

      actually, there’s is a real problem with that that has been reported by more people and that i’ve been also able to reproduce from time to time but I could not find a fix for it. sometimes it happens and sometimes it doesn’t and it depends on the words and/or the letters in the words, i have no idea

  • kpc, 2013-12-10, 22:19

    Yes, the problem is still there. We are using Adobe Typekit to add out fonts. We’re using Cora. I’ve tried using Myriad-Pro with this issue as well and it still repeats. Before I add Adobe Typekit to the site it works perfectly across all Window 8.1 major browsers, but when I install typekit for Cora or Myriad-Pro in FF and IE I get words kicked down to a second line and in Chrome the target for the tip is like 20pixels off target for the vertical offset, it lands below target and covers the icon. That’s the one that is a bummer. I did send this issue to Adobe Typekit, maybe that is the issue in my case? Oh, I can’t determine the default font before I install typekit but it’s something like Times, not something we want to use, but it doesn’t interfere with the jQuery. I’ve also played around with line-height, padding, max-width and can’t affect a change. Max_width doesn’t seem to want to apply for FF and IE, and the vertical_offset thing in Chrome I have no idea for a workaround.

    Reply
  • Anil, 2014-03-05, 14:16

    I have multiple tool tips on page –
    1) How can i change text for the selected tool tip.
    2) How to remove the selected tool tip.

    Can you help me with these issues?

    Thanks,
    Anil

    Reply
    • Stefan Gabos, 2014-03-27, 12:06

      1. attach a callback function to the onShow property; the callback receives as second argument the tooltip element and you’ll be able to change the text
      2. that is not currently possible

  • vinoth, 2014-04-17, 16:50

    Hi Stefan Gabos,

    Your plugin is awesome. Could you please suggest me, on tools tips, some of the text are broken to next line and some of them are some at a stretch. Even though the smaller texts break but longer text won’t get breaks to next line. May I know the reason.

    Reply
  • Daren, 2014-05-09, 13:26

    This is great, thanks for this! Could you please give an example of how to use the onHide event? I’m showing a tooltip programatically, and when the user closes it, I want to call a function. Here’s what I’ve done:

    $(document).ready(function () {
    // show tooltips for any element that has a class named “tooltips”
    // the content of the tooltip will be taken from the element’s “title” attribute
    var zt = new $.Zebra_Tooltips($(‘.tooltips’), {
    ‘position': ‘left’,
    ‘onHide': ‘doSomething()’
    });
    zt.show($(‘.tooltips’), true); // destroy on close
    });

    function doSomething(){
    alert(‘hello world’);
    }

    But nothing happens when you click “Close”. What am I doing wrong? Thanks again.

    Reply
    • Stefan Gabos, 2014-05-11, 17:27

      that is because you attached a string to the onHide event (because of the quotes).

      you should either write it like

      'onHide': doSomething

      and define your function like

      var doSomething = function() {...}

      or, simpler

      'onHide': function() {
        alert('hello world');
      }
  • don, 2014-06-27, 16:37

    Love your tooltips. Works great.
    Any way to have a photo come up instead of the bubble message?

    Reply

Leave a Reply

Your email address will not be published
You can use <strong>, <em>, <a>, <img>, <code>
Characters are not case-sensitive