Press "Enter" to skip to content

jQuery Plugin for Creating Beautiful Tooltips | zebra_tooltips

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

PropertyTypeDefaultDescription
animation_speedinteger250The speed (in milliseconds) of the animation used to show/hide tooltips.
animation_offsetinteger20The number of pixels the tooltips should use to slide into position.
Set to 0 for no sliding.
close_on_clickbooleanTRUEBy default, if the users clicks when over a tooltip, the tooltip will close (if the tooltip was not open programatically, that is).
Set this property to FALSE to prevent this behavior.
contentstring“”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 the content 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.
hide_delayinteger100The delay (in milliseconds) after which to hide the tooltip once the mouse moves away from the trigger element or the tooltip.
keep_visiblebooleanTRUEShould 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?
max_widthinteger250Maximum width of the tooltip’s content
opacityfloat0.85The tooltip’s opacity.
Must be a value between 0 (completely transparent) and 1 (completely opaque)
positionstringcenterThe tooltip’s position, relative to the trigger element.
Can be centerleft or right
prerenderbooleanFALSEIf set to TRUE, tooltips will be created on document load, rather than only when needed.
show_delayinteger100The delay (in milliseconds) after which to show the tooltip once the mouse is over the trigger element.
vertical_alignmentstringaboveBy 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_offsetinteger0How close (in pixels) should the tip of the tooltip be relative to the parent element.

Events

EventDescription
onBeforeHideEvent fired before a tooltip is hidden.
The callback function receives as argument the element the tooltip is attached to, and the tooltip element.
If the callback function returns boolean FALSE, the tooltip will not be hidden.
onHideEvent fired after a tooltip is hidden.
The callback function receives as argument the element the tooltip is attached to, and the tooltip element.
onBeforeShowEvent fired before a tooltip is shown.
The callback function receives as argument the element the tooltip is attached to, and the tooltip element.
If the callback function returns boolean FALSE, the tooltip will not be shown.
onShowEvent fired after a tooltip is shown.
The callback function receives as argument the element the tooltip is attached to, and the tooltip element.

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.

Be First to Comment

    Leave a Reply

    Your email address will not be published.