Lightweight and Highly Customizable jQuery Tooltip Plugin - Zebra_Tooltips

Lightweight and Highly Customizable jQuery Tooltip Plugin - Zebra_Tooltips

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. Appearance can be easily customized both through JavaScript and/or CSS. Also, tooltips can be aligned left, center or right relative to the parent element. Zebra_Tooltips makes use of NO IMAGES (everything is handled from CSS), 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!

Basic Usage:

1. Include required CSS file on the page

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

2. Include jQuery library and Zebra_Tooltips plugin on your web page

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

3. The Html

a href="#" class="demo" title="One of the BEST jQuery websites that provide web designers and developers with a simple way to preview and download a variety of Free jQuery Plugins.">jQueryScript.Net</a>

4. Call the plugin.

<script>$(document).ready(function() {
    new $.Zebra_Tooltips($('.demo'));

5. All available options with default values.

animation_speed: 250,
animation_offset: 20,
background_color: "#000",
close_on_click: true,
color: "#FFF",
content: false,
default_position: "above",
hide_delay: 100,
keep_visible: !0,
max_width: 250,
opacity: ".95",
position: "center",
prerender: false,
show_delay: 100,
vertical_offset: 0,
onBeforeHide: null,
onHide: null,
onBeforeShow: null,
onShow: null

Change logs:

v1.3.1 (2017-12-14)

  • ported CSS to SASS
  • minor source code tweaks
  • Explicitly state that RGBA values may be used for background color
  • some style updates
  • Don't set font size anymore

v1.2.4 (2017-05-17)

  • Minor source code tweaks

v1.2.3 (2016-01-17)

  • Added "use strict"

v1.2.2 (2015-01-16)

  • the “title” attribute is not removed anymore
  • updated jQuery to 1.12.0 in examples
  • added Grunt integration for automating JSHint & Uglify processes
  • added integration with Bower

v1.2.1 (2013-11-26)

  • Added a new "default_position" property

v1.2.0 (2013-10-19)

  • Updated documentation and reference

This awesome jQuery plugin is developed by stefangabos. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 14.12.2017
  • Source