Zebra_Tooltips, a lightweight tooltips jQuery plugin

Get the latest updates on this jQuery plugin via RSS

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. 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 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 makes use of NO IMAGES (uses CSS3 for rounded corners and drop shadow and falls back gracefully for browsers that don’t support CSS3) and the 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 5KB 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
  • makes use of NO IMAGES (uses CSS3 for rounded corners and drop shadow and falls back gracefully for browsers that don’t support CSS3)
  • 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_tooltip.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 - Simple but smart tooltips!">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="Zebra_Tooltips - Simple but smart tooltips!">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="Zebra_Tooltips - Simple but smart tooltips!">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="Zebra_Tooltips - Simple but smart tooltips!">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'
    });

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

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 - Simple but smart tooltips!">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 FALSE.
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 of the DOM 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 values the tooltips’ “title” attribute.

Default is FALSE
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.
opacity double

The tooltip’s opacity. 

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

Default is .85
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.
position string

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

Can be any of the following:

- center
- left
- right

Default is “center”.

Events
onBeforeHide  

Event fired before a tooltip is hidden. 

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

Event fired after a tooltip is hidden. 

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

Event fired before a tooltip is shown. 

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

Event fired after a tooltip is shown. 

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

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.0.1 (zip, 86Kb)
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 thas 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.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

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

Follow the comments via RSS
  • Ajai, 2012-04-27, 06:20

    Hi Stefan,

    Its a cool tool tip.nice work
    But how to position it right or left bottom with arrow at top

    thanks
    Ajai

    Reply
  • tolpi, 2012-05-05, 10:27

    hi

    this is a really nice plugin but the width is to small. My tooltip content seems to have one word too much most of the time so there is a linebreak for one word which looks stupid.
    And chance to set the wordwrap higher?

    Reply
    • Stefan Gabos, 2012-05-07, 06:33

      the width can be set in CSS file.
      currently is

      max-width: 250px;
    • tolpi, 2012-05-07, 17:32

      I already changed the setting there but it didn’t work out. The last word of the sentence is always wrapped to the next line.
      I tried writing a longer sentence, so the tooltip bubble grew bigger and still only wrapped one word to the next line. There I think… when it grows bigger for a longer sentence (because of the max-width) why didn’t the shorter sentence fit in the one line and the last word was wrapped to the next line…
      This looks ugly …

  • tolpi, 2012-05-05, 10:35

    oh, and when the text goes over 2 lines it seems that sometimes an arrow pointing down appears WITHIN the tooltip bubble under the first line but above the 2nd line a covering the text.
    Any way to disable the arrow?

    Reply
    • Stefan Gabos, 2012-05-07, 06:37

      i’ll have a look on why the arrow is not appearing in IE

    • tolpi, 2012-05-07, 17:27

      I can see it in Firefox too.
      Just take a look at your example for the programmatically shown tooltip. The letter P in the word tooltip is missing the lower part, because the arrow is over it. Only when the tooltip is above the link though.

    • tolpi, 2012-05-07, 19:01

      Adding a bool for show/hide arrow will be fine so that you can have different tooltip with arrow and without.
      It also seems that the arrow is a bit offset to the right of the middle and is not centered.

  • tolpi, 2012-05-05, 11:03

    …and while I’m playing around with this really useful plugin I have another improvement idea for settings:
    border (bool; def. false)
    border-width
    border-color

    Reply
  • tolpi, 2012-05-05, 12:53

    playing around some more, there is an error in your documentation.
    in part 4, the programmatically shown tooltip the following line:
    zt.show($(‘.zebra_tooltips’), true); // destroy on close
    should be
    zt.show($(‘.tooltips’), true); // destroy on close

    thanks for this plugin again =)

    Reply
    • Stefan Gabos, 2012-05-07, 06:31

      thanks, it’s fixed now!

  • austriasoft, 2012-05-06, 15:55

    Very nice plugin!

    If you add “white-space:nowrap” to the CSS after line 21, than the tooltip shows identical on IE or firefox, including the arrow on IE, which is NOT shown otherwise.

    Also I have added 2 lines of code the prevent showing a blank tooltip if some of the selected elements have a title attribute and others don’t have it. This simplifies the coding dramaticly. If you are interested in the changes, please send me an email.

    Manfred

    Reply
    • Stefan Gabos, 2012-05-07, 06:31

      white-space: nowrap is not a good solution – text needs to wrap; but i’ll have a look on why the arrow is not showing in Internet Explorer. thanks!

  • Michael, 2012-05-11, 15:46

    Stefan, did you ever find a fix for IE/FF for arrow icon/nowrap issue?

    Reply
    • Stefan Gabos, 2012-05-11, 16:50

      yes! i’ll publish the updated version in a few hours

    • tolpi, 2012-05-14, 13:03

      thanks Stefan, the Update is really appreciated.

      But there are still unneeded wordwraps happening at random. I mean even if the max width is not even reached closely a new line is started for only one word. But only sometimes. Please fix this and the plugin is perfect =)
      Every example on this page alone has the word tooltip wrapped to the next line. Some more control via a flag would be good here.

      And an optional border attribute would be cool.
      thx =)

      and in your css you don’t need the -moz-border and -border-webkit- attributes anymore as there is a quasi standard for this by now.
      or is this fallback for older browsers?

    • Stefan Gabos, 2012-05-14, 17:49

      the word wrapping seems to be happening only in IE9 which wraps words curiously. I’ll keep looking into this; the border cannot be done because of the arrow – maybe if there’s also an option for disabling the arrow – i’ll think about that; the CSS is to support as many browsers and versions as possible

Leave a Reply

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