Tweet

Zebra_Tooltips, a lightweight tooltips jQuery plugin

Get the latest updates on this jQuery plugin via RSS

• Latest version
  1.0.1
  released on
  April 28, 2013
• 1. Overview
• 2. Requirements
• 3. How to use
• 4. Configuration
• 5. Download
• 6. Changelog
• 7. Comments

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 programmaticaly, 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 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 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
• 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+)

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)

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.

Configuration

All parameters are optional.

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

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

Download

version 1.1.0

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

You may also like:

• jQuery Plugin Boilerplate
• Zebra_Accordion, a tiny accordion jQuery plugin
• Zebra_Cookie, an extremely small jQuery plugin for writing, reading and deleting cookies
• Zebra_Datepicker, a lightweight datepicker jQuery plugin
• Zebra_Dialog, a lightweight dialog box jQuery plugin
• Zebra_Tooltips, a lightweight tooltips jQuery plugin
• Zebra_TransForm, a tiny jQuery plugin for replacing checkboxes, radio buttons and selects

Changelog

Click on a version to expand/collapse information.

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

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

Follow the comments via RSS

• Sean, 2013-05-09, 18:36

  Possible to do a “seperator” in this Tooltip. Example

  title=’Settings|Change your Setting’

  So my tooltip would have a Setting as Header, then Change your Setting as body of that tooltip?

  Reply
  
  • Stefan Gabos, 2013-05-10, 06:36

    try something like this

    <a 
    href="#" 
    class="tooltips" 
    title="<strong>Settings</strong><br>Change your settings">
    Settings</a>
    
  • Sean, 2013-05-10, 07:57

    Close but not what I’m looking for, Currently I have this:

    <span style='float:right;' class='ui-icon ui-icon-wrench ToTip' id='ThemeSettingO' title="Theme SettingChange Themes Settings!”>

    then in Stylesheet:
    .TiTip {width:150px;border:1px solid #111111 !important;}
    .HeTip {width:150px;height:16px;max-height:16px;padding:2px;text-align:center;font-weight:bold;-moz-border-radius-topleft:5px;-webkit-border-top-left-radius:5px;-moz-border-radius-topright:5px;-webkit-border-top-right-radius:5px;filter:alpha(opacity=100);opacity:100;}
    .BoTip {width:150px;padding:4px;-moz-border-radius-bottomleft:5px;-webkit-border-bottom-left-radius:5px;-moz-border-radius-bottomright:5px;-webkit-border-bottom-right-radius:5px;filter:alpha(opacity=100);opacity:100;}

    It would produce something like what you saw in GitHub (tooltip sample in bug report)
    
• Sean, 2013-05-09, 21:26

  How/where can I change the color of the arrow?

  Reply
  
  • Stefan Gabos, 2013-05-10, 06:41

    The color of the tooltip (including the arrow) can be changed via the “background-color” property; for setting *only* the arrow’s color, you’ll have to hack the source code and change the color at line 526 in zebra_tooltips.src.js
    
• Sean, 2013-05-10, 07:59

  Ack! It removed my html codes lol..

  <span style='float:right;' class='ui-icon ui-icon-wrench ToTip' id='ThemeSettingO' title="Theme SettingChange Themes Settings!">
  

  Reply
  
• Sean, 2013-05-18, 18:55

  Have an issue with tooltip. When I create an AJAX and pulls data from an external file and the tag has “title” in it, after the result is outputted, the “title” would not display tooltip properly, it would act like an “Alt=” instead of title. Any workaround for that?

  Reply
  
  • Sean, 2013-05-18, 19:39

    Found a bit sloppy workaround, but it works, so never mind about that
    

Leave a Reply

Leave this field blank

Name*

Email*

Your email address will not be published

Website

Message*

You can use <strong>, <em>, <a>, <img>, <code>

Get a new code

Enter the characters that stand out in the image above

Characters are not case-sensitive