Lightweight and highly configurable jQuery tooltips plugin – Zebra_Tooltips

Tooltips are generally used in HTML to indicate the user what is the functionality of certain element. You may have noticed that whenever you hover you mouse over certain elements a small text pops up. That is done through tooltip. Here I going to share Lightweight and highly configurable jQuery tooltips plugin – Zebra_Tooltips. Zebra_Tooltips is a lightweight (around 6KB minified, 1.9KB gzipped) jQuery tooltips plugin, featuring nice transitions and offering a wide range of configuration options. The plugin detects the edges of the browser window and makes sure that the tooltips always stay in the viewport.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 (like error messages after validating a form).

jquery-tooltip-plugin

By default, the plugin 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. Tooltips can be aligned left, center or right, relative to the parent element.Zebra_Tooltips uses NO IMAGES 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!



Features

  • lightweight – it weights around 6KB minified and 1.9KB gzipped
  • 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 using the API
  • appearance can be easily customized both through exposed JavaScript properties and/or CSS
  • tooltips can be aligned left, center or right, relative to the parent element
  • uses NO IMAGES and falls back gracefully for browsers that don’t support all the fancy stuff
  • can be attached to any elements not just anchors
  • works in all major browsers (Firefox, Opera, Safari, Chrome, Internet Explorer 6+)

Integrate smart Zebra_Tooltips on your website

Integration of Zebra_Tooltips is so easy just follow the below steps.

Libraries

First, load latest jQuery from a CDN and provide a fallback to a local source then Load the Zebra_Tooltips jQuery plugin

<!--CSS-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/zebra_tooltips/dist/zebra_tooltips.min.css">
 
<!--JS-->
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/zebra_tooltips/dist/zebra_tooltips.min.js"></script>



Basic usage

HTML

<p>
    <a href="javascript: void(0)" class="zebra_tooltips"
        title="Zebra_Tooltips is a lightweight and highly configurable jQuery tooltips plugin">
    Over here!</a>
</p>

JS

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

Custom colors

HTML

<p>
    <a href="javascript: void(0)" class="zebra_tooltips"
        title="Zebra_Tooltips is a lightweight and highly configurable jQuery tooltips plugin">
    Over here!</a>
</p>

JS

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



Align tooltips relative to the parent element

HTML

<p>
    Tooltip on the
    <a href="javascript: void(0)" class="zebra_tooltips_left"
        title="I am aligned to the left of the element!">
    left</a>.
 
    Tooltip on the
    <a href="javascript: void(0)" class="zebra_tooltips_right"
        title="I am aligned to the right of the element. Also, my width is different.">
    right</a>
</p>

JS

$(document).ready(function() {
    new $.Zebra_Tooltips($('.zebra_tooltips_left'), {
        position:   'left',
        max_width:  300
    });
    new $.Zebra_Tooltips($('.zebra_tooltips_right'), {
        position:   'right',
        max_width:  500
    });
});

See live demo and download source code.

DEMO | DOWNLOAD

See official github repository for more information and follow for future updates. Don’t forget to read license for using above plugin in your commercial project.