Robust & Extensible Tooltip Plugin For jQuery - myTooltip

Robust & Extensible Tooltip Plugin For jQuery - myTooltip
File Size: 22.6 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.