Tooltiper jQuery Plugin Examples

Basic usage

Just select elements with title attribute and call tooltiper() on them inside jQuery's ready() function:

$(".example1 a").tooltiper();

Tooltiper - jQuery plugin to make tooltips.

---

HTML inside tooltips

In order to treat the content of tooltips as HTML pass tooltipType: 'html' option in tooltiper() plugin:

$(".example2 a").tooltiper({tooltipType: 'html'});

Tooltiper - jQuery plugin to make tooltips.

---

Appearence mode of tooltips

The default options are 'fadeIn/fadeOut'. Other valid options are ['show', 'slideDown'] for appearence mode and ['hide', 'slideUp'] for disappearence mode:

$(".example3 a").tooltiper({
  tooltipAppearenceMode: 'slideDown',
  tooltipDisappearenceMode: 'slideUp'
});

Tooltiper - jQuery plugin to make tooltips.

---

Appearence/disappearence speed

The default option is 'fast'. Other valid options are ['slow', 'normal'] or some numeric value:

$(".example4 a").tooltiper({
  tooltipShowSpeed: 300,
  tooltipHideSpeed: 800
});

Tooltiper - jQuery plugin to make tooltips.

---

Bounding tooltip to the cursor

By default the tooltips don't move after appearing. It is possible to change it and bound the tooltip to the cursor by passing in the option tooltipBound: 'cursor':

$(".example5 a").tooltiper({tooltipBound: 'cursor'});

Tooltiper - jQuery plugin to make tooltips.

---

Changing markup and styles of tooltips

The tooltips are created as spans with some predefined css properties applied and class js-tooltiper is assigned. It is possible to change this initial setup:

$(".example6 a").tooltiper({
  tooltipClass: "js-fancy-class",
  tooltipElement: "div",
  tooltipCss: {"color": "red"}
});

Tooltiper - jQuery plugin to make tooltips.

---

Tooltiper is chainable

It means that other jQuery functions/plugins can be chained to the Tooltiper call:

$(".example7 a").tooltiper().on('click', function(event) {
  event.preventDefault();
  alert("This click-event handler has been chained to the Tooltiper!");
});

Tooltiper - jQuery plugin to make tooltips.

---