Lightweight and Easy Customizable jQuery Tooltip Plugin

Stefan Gabos February 27, 2023

Zebra Tooltips is a lightweight, highly customizable and cross-browser jQuery plugin for creating simple, but smart and visually attractive tooltips, featuring nice transitions and offering a lot 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.

Zebra Tooltips Features

The tooltips are created using NO IMAGES and falls back gracefully for browsers that don't support all the fancy stuff.
Tooltips are also accessible via keyboard only - try moving with the tab key
Works in pretty much any browser - Firefox, Chrome, Safari, Edge, Opera and Internet Explorer 6+

Zebra Tooltips Implementation

Include required tooltip plugin CSS & javascript source files on the page

...

The simplest way to get going is simply attaching the tooltips to one or more elements. As far as the HTML markup goes, the title attribute is required as it contains the tooltip's content.

Over here!

Call the plugin on document ready

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

Plugin options

    var options = {
        //  The speed (in milliseconds) of the animation used to show/hide tooltips.
        animation_speed: 250,            

        //  The number of pixels the tooltips should use to "slide" into position.
        //  Set to 0 for no sliding.
        animation_offset: 20,             

        //  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 behavior.
        close_on_click: true,           

        //  The content of the tooltip.
        //  By default, the content of the tooltip is taken from the "title"
        //  attribute of the element the tooltip is attached to and has priority
        //  over this property (meaning that if the "title" attribute is set,
        //  the value of this property is ignored).
        //  Use this property to set the content of the tooltip when you can't
        //  or don't want to use the "title" attribute.
        content: false,          

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

        //  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.
        keep_visible: true,           

        //  Maximum width of the tooltip's content;
        max_width: 250, 

        //  The tooltip's opacity.
        //  Must be a value between 0 (completely transparent) and 1 (completely
        //  opaque)
        opacity: '.95',          


        //  The tooltip's position, relative to the trigger element.
        //  Can be 'center', 'left' or 'right'.
        position: 'center',       

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

        //  The delay (in milliseconds) after which to show the tooltip once the
        //  mouse is over the trigger element.
        show_delay: 100,            

        //  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".
        vertical_alignment: 'above',        

        //  How close (in pixels) should the tip of the tooltip be relative to
        //  the parent element.
        vertical_offset: 0         
    };
    //Implementation
    $(document).ready(function() {
      new $.Zebra_Tooltips($('.devstoc_demo'), options);
    });

Callback functions

    //  Event fired before a tooltip is hidden.
    //
    //  The callback function receives as arguments the element the
    //  tooltip is attached to, and the tooltip element.
    //
    //  If the callback function returns boolean FALSE, the tooltip will
    //  not be hidden.
    onBeforeHide: null,           

    //  Event fired after a tooltip is hidden.
    //
    //  The callback function receives as arguments the element the
    //  tooltip is attached to, and the tooltip element.
    onHide: null,           

    //  Event fired before a tooltip is shown.
    //
    //  The callback function receives as arguments the element the
    //  tooltip is attached to, and the tooltip element.
    //
    //  If the callback function returns boolean FALSE, the tooltip will
    //  not be shown.
    onBeforeShow: null,           

    //  Event fired after a tooltip is shown.
    //
    //  The callback function receives as arguments the element the
    //  tooltip is attached to, and the tooltip element.
    onShow: null

API methods

        var devstocDemo = new $.Zebra_Tooltips($('.devstoc_demo'));

        // shows the tooltip
        devstocDemo.show(element, [destroy = FALSE])

        // hides the tooltip
        hide(element, [destroy = FALSE])