Tooltip - Javascript

Usage

Summoned by:

Activation:

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

<script src="./dist/tooltip.min.js"></script>

var tooltips = new tooltip(elements [array], options [object]);

Example:

<button data-tooltip="Life is a beach!">⛱</button>

var tooltips = new tooltip( document.querySelectorAll('[data-tooltip]'), {
  once: true
});

You may replace

document.querySelectorAll('selector')

with a jQuery object like

$('selector')

.

Use tooltips for interactive imagery.

attribute
Type: String
Defualt: data-tooltip

The attribute that contains the content.

delay
Type: Number
Defualt: 150

Sets delay time before the tooltip appears. (expect milliseconds)

150

duration
Type: Number
Defualt: 2500

Sets how long the tooltip stays on the screen. (expect milliseconds. Note: click, touch and scroll will ignore this and drop the tooltip)

2500

offsetTop
Type: Number
Defualt: 0

The offset from the top viewport uses when element is close to very top then the tooltip appears under the element instead. (calculates as pixels)

once
Type: Boolean
Defualt: false

When its true, identical content will not be shown more than once even if they are belong to different elements.

display
Type: Number
Defualt: 1

Sets how many times a tooltip can be shown.

onpop
Type: Function
Defualt: null

Triggers after tooltip popped up.

var tooltips = new tooltip( elements, {
  onpop: function(el, popup) {
    // code
  }
});

ondrop
Type: Function
Defualt: null

Triggers after tooltip dropped.

var tooltips = new tooltip( elements, {
  ondrop: function(el) {
    // code
  }
});