Back to post

jTippy is very simple, responsive enabled and easy to configurable jQuery tooltip plugin. Supports multiple triggers so anyone can use click, hover, focus and hoverfocus option as they needed. It has many predefined sizes that can be easily implemented as per the requirements. The appearance and styling of the tooltip can be fully modified through CSS as you need.

Features:

How to use it:

1. Include the Javascript jTippy.min.js at the bottom of the web page.

<script src="path/to/jTippy.min.js"></script>

2. Include the CSS jTippy.min.css in the header of the page.

<link rel="stylesheet" href="path/to/jTippy.min.css">

3. Add the basic HTML to the page.

<a href="#" data-toggle="tooltip" title="Hey! I'm a tooltip!">Hey! I'm a tooltip!</a>

4. Initialize the plugin and we're ready to go. 

$(function(){
  $('[data-toggle="tooltip"]').jTippy();
});

Plugin's default options:

Name Default Type Description
title '' string/function(btn, jtippy) String returning string: overridden by the title attribute - function is run every time the tooltip is displayed and can be used to grab content via XHR/AJAX
trigger 'hoverfocus' string ('click', 'hover', 'focus', 'hoverfocus'): defines when the tooltip should be shown
position 'auto' string ('auto','top','bottom','left','right'): preferred location of the tooltip (defaults to auto if no space)
theme 'black' string ('black', 'lt-gray', 'white', 'blue', 'green', 'red')
size 'small' string ('tiny', 'small', 'medium', 'large')
backdrop false string|false ('black', 'white', 'blurred'): Only works with trigger: "click"
class '' string class(es) to add to the tooltip
singleton true boolean if true, when this tooltip is triggered, all others will hide
close_on_outside_click true boolean if true and trigger: 'click', when clicking outside the tooltip, it will be hidden

Events

$(function(){
  $('[data-toggle="tooltip"]').jTippy({
    //options here
  }).on('jt-show', function(e, tooltip, hide){
      //triggered on show of tooltip
      //the tooltip's jquery dom object is provided as the second param
      //to hide the tooltip, run hide()
  });
});
$(function(){
  $('[data-toggle="tooltip"]').jTippy({
    //options here
  }).on('jt-hide', function(e){
      //triggered on hide of tooltip
  });
});

Set global options.

$.jTippy.defaults.backdrop = false;
$.jTippy.defaults.theme = 'black';
$.jTippy.defaults.trigger = 'hoverfocus';

Override global options.

<a href='#'
    data-toggle="tooltip"
    data-backdrop="black"
    data-trigger="click">
    Black backdrop!
</a>
$('[data-toggle="tooltip"]').jTippy();

Trigger

Click
Hover
Focus
HoverFocus

HTML structure

<a href="#" data-toggle="tooltip" title="Hey! I'm a tooltip!" data-trigger="click">Click</a>
<a href="#" data-toggle="tooltip" title="Hey! I'm a tooltip!" data-trigger="hover">Hover</a>
<a href="#" data-toggle="tooltip" title="Hey! I'm a tooltip!" data-trigger="focus">Focus</a>
<a href="#" data-toggle="tooltip" title="Hey! I'm a tooltip!" data-trigger="hoverfocus">HoverFocus</a>

Backdrops (only works with click trigger):

Black
White
Blurred

HTML structure

<a href="#" data-toggle="tooltip" title="Hey! I'm a tooltip!" data-trigger="click" data-backdrop="black">Black</a>
<a href="#" data-toggle="tooltip" title="Hey! I'm a tooltip!" data-trigger="click" data-backdrop="white">White</a>
<a href="#" data-toggle="tooltip" title="Hey! I'm a tooltip!" data-trigger="click" data-backdrop="blurred">Blurred</a>

Preferred Sizes

Tiny
Small
Medium
Large

HTML structure

<a href="#" data-toggle="tooltip" title="Hey! I'm a tooltip!" data-size="tiny">Tiny</a>
<a href="#" data-toggle="tooltip" title="Hey! I'm a tooltip!" data-size="small">Small</a>
<a href="#" data-toggle="tooltip" title="Hey! I'm a tooltip!" data-size="medium">Medium</a>
<a href="#" data-toggle="tooltip" title="Hey! I'm a tooltip!" data-size="large">Large</a>

Preferred Placement

Top
Bottom
Right
Left

HTML structure

<a href="#" data-toggle="tooltip" title="Hey! I'm a tooltip!" data-position="top">Top</a>
<a href="#" data-toggle="tooltip" title="Hey! I'm a tooltip!" data-position="bottom">Bottom</a>
<a href="#" data-toggle="tooltip" title="Hey! I'm a tooltip!" data-position="right">Right</a>
<a href="#" data-toggle="tooltip" title="Hey! I'm a tooltip!" data-position="left">Left</a>

Preferred themes

Black
lt-gray
White
Blue
Green
Red

HTML structure

<a href="#" data-toggle="tooltip" title="Hey! I'm a tooltip!" data-theme="black">Black</a>
<a href="#" data-toggle="tooltip" title="Hey! I'm a tooltip!" data-theme="lt-gray">lt-gray</a>
<a href="#" data-toggle="tooltip" title="Hey! I'm a tooltip!" data-theme="white">White</a>
<a href="#" data-toggle="tooltip" title="Hey! I'm a tooltip!" data-theme="blue">Blue</a>
<a href="#" data-toggle="tooltip" title="Hey! I'm a tooltip!" data-theme="green">Green</a>
<a href="#" data-toggle="tooltip" title="Hey! I'm a tooltip!" data-theme="red">Red</a>