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.
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.
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.
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.
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.
The tooltips are created as span
s 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.
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.