Robust & Extensible Tooltip Plugin For jQuery - myTooltip

myTooltip is a feature-rich jQuery tooltip plugin for creating animated, highly customizable and extensible bubble popups to enhance your website/application default tooltips.

Main features:

• Fully configurable via HTML5 data attributes.
• Custom offsets, templates, themes and animations.
• Triggers on click, hover or focus.
• 6 built-in themes: default, warning, info, success, light and danger.
• Useful methods and events.
• Can be used on any DOM elements, not only a tag.

Basic usage:

1. Include the jQuery myTooltip plugin's CSS file in the head section of the document.

<link href="jquery.mytooltip.css" rel="stylesheet">

2. Attach a basic tooltip to an action button that triggers on hover by default.

<button class="demo"
        data-mytooltip-template="Tooltip text">
        Hover me
</button>

3. Initialize the plugin and done.

$('.demo').myTooltip();

4. Default plugin parameters. These parameters can be passed in to the plugin via HTML5 data-mytooltip-OPTION attributes as in data-mytooltip-template="Tooltip text"

// top, right, bottom, left
'direction'       : 'top',

// offset
'offset'          : 10,

// border
'border'          : 'closer',

// additonal CSS class
'customClass'     : '',

// custom template
'template'        : null,

// custom content
'content'         : '',

// dynamic template
dinamicTemplate:  : false,

// hover, click or focus
'action'          : 'hover',

// danger, info, warning, success or light
'theme'           : 'default',

// width of parent container
'widthOfParent'   : false,

// show tooltip arrow
'showArrow'       : true,

// element to ignore
'ignoreClass'     : 'js-mytooltip-ignore',

// disposable tooltip
'disposable'      : false,

// load tooltip text from title attribute
'fromTitle'       : false,

// enable 'help' cursor
'cursorHelp'      : false,

// auto dismiss after a certian timeout
'hideTime'        : false,

// display on hover
'hoverTooltip'    : true,

// animation options
'animateOffsetPx' : 15,
'animateDuration' : 200

5. Events.

// show-before
// show-complete
// hide-before
// hide-complete
$('.demo').on(event, function() {
  // do something
});

6. Public methods.

// update storage myTooltip for dynamic elements
$('.demo').myTooltip('update');

// destroy the plugin
$('.demo').myTooltip('destroy');

// update current tooltip
 $('.demo').myTooltip('updateContent', new Content);

Change log:

2017-04-08

• Add module support

2016-08-02

• v1.2.2

2015-12-10

• Add two options - border and widthOfParent

2015-12-09

• Add class js-mytooltip-close fo close tooltip + fix

2015-11-17

• Add showArrow option and refactor

2015-10-30

• Add option dynamic template and public method updateTemplate

---

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