Zebra Tooltips  

A lightweight, accessible, and highly configurable jQuery plugin for creating beautiful tooltips

Zebra Tooltips is a lightweight (around 5KB minified, 1.7KB gzipped) and accessible jQuery tooltips plugin for creating smart and visually attractive tooltips, featuring nice transitions, 4 themes, and offering a wide range of configuration options.

Besides the default behavior of tooltips showing when user hovers the element, tooltips may also be shown and hidden programmatically. When shown programmatically, the tooltips feature a "close" button and clicking it will be the only way of closing tooltips opened this way. This is useful for drawing users' attention to specific areas of a page (like error messages after validating a form).

Tooltips can be aligned left, center or right, relative to the parent element, as well as above or below the parent element. The library detects the browser window's edges and will make sure that the tooltips are always in the viewport.

The tooltips are created using NO IMAGES and falls back gracefully for browsers that don't support all the fancy stuff.

Works in pretty much any browser - Firefox, Chrome, Safari, Edge, Opera and Internet Explorer 6+

Features

• lightweight - it weights around 5KB minified and 1.7KB gzipped
• includes 4 themes
• features nice transitions
• detects the edges of the browser window and makes sure that the tooltips always stay in the viewport
• tooltips may be shown and hidden programatically
• tooltips can be aligned left, center or right, relative to the parent element, as well as above or below the parent element
• uses NO IMAGES and falls back gracefully for browsers that don't support all the fancy stuff
• works in pretty much any browser - Firefox, Chrome, Safari, Edge, Opera and Internet Explorer 6+

🎂 Support the development of this project

Your support means a lot and it keeps me motivated to keep working on open source projects.
If you like this project please ⭐ it by clicking on the star button at the top of the page.
If you are feeling generous, you can buy me a coffee by donating through PayPal, or you can become a sponsor.
Either way - Thank you! 🎉

Demo

See the demos

Requirements

Zebra Tooltips has no dependencies other than jQuery 1.7+

Installation

Zebra Tooltips is available as a npm package. To install it use:

# the "--save" argument adds the plugin as a dependency in packages.json
npm install zebra_tooltips --save

Zebra Tooltips is also available as a Bower package. To install it use:

# the "--save" argument adds the plugin as a dependency in bower.json
bower install zebra_tooltips --save

How to use

First, load jQuery from a CDN and provide a fallback to a local source like:

<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<script>window.jQuery || document.write('<script src="path/to/jquery-3.5.0.js"><\/script>')</script>

Load the Zebra Tooltips jQuery plugin

<script src="path/to/zebra_tooltips.min.js"></script>

Alternatively, you can load Zebra Tooltips from JSDelivr CDN like this:

<!-- for the most recent version, not recommended in production -->
<script
  src="https://cdn.jsdelivr.net/npm/zebra_tooltips@latest/dist/zebra_tooltips.min.js"></script>

<!-- for a specific version -->
<script
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/zebra_tooltips.min.js"></script>

<!-- replacing "min" with "src" will serve you the non-compressed version -->

Load one the plugin's theme

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

...or from JSDelivr CDN

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/default/zebra_tooltips.min.css">

<!-- replacing "min" with "src" will serve you the non-compressed version -->

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'));

});

Configuration options

Properties

All parameters are optional.

Note that any of the properties below may also be set via data attributes. To do this you have prefix the name of the property you want to set with data-ztt_.

Events

Methods

show(element, [destroy = FALSE])

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.

Arguments

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 anymore 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 element = $('#tooltip'),
    tooltip = new $.Zebra_Tooltips(element);

tooltip.show(element);

hide(element, [destroy = FALSE])

Hides 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.

Arguments

element - an element or a collection of elements for which to hide the attached tooltips.

destroy - (optional) - if set to TRUE, once hidden, the tooltip will be muted and will not be shown anymore 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 element = $('#tooltip'),
    tooltip = new $.Zebra_Tooltips(element);

tooltip.hide(element);

Sponsors

Cross browser/device testing is done with