Flexible Customizable Tooltip Plugin - jq-tooltip

A lightweight, flexible, customizable and themeable jQuery tooltip plugin that allows displaying multiple tooltips on the same element.

More features:

• Position options: top, top-left, top-right, right, right-top, right-bottom, bottom, bottom-left, bottom-right, left, left-top, left-bottom.
• Built-in themes: strawberry, orange, banana, lime, blueberry, cocoa, silver, slate.
• The tooltip content can be specified in a data attribute or passed as a string.
• Custom tooltip template.

How to use it:

1. To get started, include jQuery (slim build) and the jq-tooltip plugin's files on the web page.

<link rel="stylesheet" href="tooltip.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="tooltip.js"></script>

2. Activate the tooltip functionality on the element.

• Update the tooltip on resize.
• Displays the tooltip on hover.
• Set the deault tooltip content.
• Close the tooltip on mouse leave.

var W = $(window);
var PI = $('.item');

W.on('resize', function () {
  PI.tooltip('update');
});

PI.hover(function () {
  $(this).tooltip({
    content: 'This is a tooltip',
  });
}, function () {
  $(this).tooltip('close');
});

3. Attach multiple tooltips to an element using the 'data-tooltip' attribute:

<div class="item"
     data-tooltip='[{"content": "Top","position": "top"},{"content": "Right","position": "right"},{"content": "Left 1","position": "left"}]'>
     Hover Me
</div>

4. All possible configurations which can be passed via JavaScript or 'data' attribute.

// Template
template: '<div class="jq-tooltip">{content}</div>',

// The content can be specified in an element attribute or passed as a string
content: undefined,

// Positioning
// (top, top-left, top-right, right, right-top, right-bottom, bottom,
// bottom-left, bottom-right, left, left-top, left-bottom)
position: 'top',

// Theme
// (strawberry, orange, banana, lime, blueberry, cocoa, silver, slate)
theme: 'slate',

// The width, if set to 0, will be calculated automatically
width: 0,

// Get parameters from the attribute
attr: true,

// Attribute Name (data-tooltip)
attrID: 'tooltip',

// Gap
gap: 8,

// Name of the custom class
class: undefined,

// ID for stored data (tooltip.data)
dataID: 'tooltip.data'

Changelog:

2018-11-29

• minor update

2018-09-28

• minor improvements

2018-09-27

• JS update

---

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