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

Besides the default behavior of tooltips that appear when the user hovers over the element, tooltips can also be shown and hidden programmatically. When the tips are displayed programmatically, the tooltips display a “close” button, and clicking on it would be the only way to close tips opened in this way. This is useful for drawing users’ attention to certain areas of the page (eg error messages after form validation).

Tooltips can be aligned left, center, or right relative to the original element, as well as above or below the original element. The library detects the edges of the browser window and makes sure that the hints are always in the viewport.

Hints are generated using any images and are safely back to browsers that don’t support all things fancy.

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

Features:

• Lightweight – weighs about 5KB mini and 1.7KB compressed
• Includes 4 themes
• Features cute transformations
• Detects browser window edges and makes sure tooltips always stay in the viewport
• Tooltips may be shown and hidden programmatically
• Tooltips can be aligned left, center, or right relative to the parent element, as well as above or below the parent element
• It doesn’t use any images and comes back gracefully for browsers that don’t support all the fancy stuff
• Works in pretty much any browser – Firefox, Chrome, Safari, Edge, Opera, Internet Explorer 6+

How to make use of it:

1. Include the required CSS file on the page.

<link rel="stylesheet" href="css/zebra_tooltips.css" type="text/css">

2. Include the jQuery library and Zebra_Tooltips plugin on your webpage.

<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript" src="zebra_tooltips.js"></script>

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

3. Call the plugin in the document ready and executed.

$(document).ready(function() {

  new $.Zebra_Tooltips($('.demo'));

});

4. All options are available with default values.

//  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         

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

6. API methods.

var myTooltip = new $.Zebra_Tooltips($('.demo'));

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

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

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

Lightweight and Highly Customizable jQuery Tooltip Plugin, Zebra Tooltips Github

See Demo And Download

Official Website(stefangabos): Click Here

This superior jQuery/javascript plugin is developed by stefangabos. For extra advanced usage, please go to the official website.