Flexible Modern Tooltip Plugin For jQuery - jTippy

Flexible Modern Tooltip Plugin For jQuery - jTippy

jTippy is a flexible, modern jQuery tooltip plugin for creating customizable, themeable tooltips on the web app. The tooltips are fully controllable through HTML data attributes.

By default, the plugin automatically exacts tooltip content from the regular title attribute of your element. You can also define your own tooltip content via JavaScript call.

More features:

  • Custom trigger event: hover, click, focus, hoverfocus, etc.
  • Custom background overlay: dark, light, blur.
  • 4 sizes: tiny, small, medium, and large.
  • 5 position options: auto, top, right, bottom, left.
  • 6 built-in themes: Black, Lt-Gray, White, Blue, Green, and Red.

How to use it:

1. Install the jtippy with NPM.

$ npm install jtippy --save

2. Or by loading the following JavaScript & CSS files in the document.

<link rel="stylesheet" href="jTippy-master/jTippy.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>
<script src="jTippy-master/jTippy.min.js"></script>

3. Initialize the jTippy plugin and we're ready to go.


4. Add the data-toggle="tooltip" attribute to the target element and define the tooltip in the title attribute and done.

<a href="#"
   title="Tooltip Content Here">
   Hover Me

5. Customize the tooltip by overriding the default settings as follows:

  // tooltip content
  title: '',
  // custom trigger event
  // 'click', 'hover', 'focus', 'hoverfocus'
  trigger: 'hoverfocus',
  // 'auto','top','bottom','left','right'
  position: 'auto',
  // 'black', 'lt-gray', 'white', 'blue', 'green', 'red'
  theme: 'black',
  // 'tiny', 'small', 'medium', 'large'
  size: 'small',
  // 'black', 'white', 'blurred'
  backdrop: false,
  // extra CSS class(es)
  class: '',
  // close other tooltips
  singleton: true,
  // close the tooltip by clicking outside
  close_on_outside_click: true

6. You can also pass the options via HTML data-OPTION attribute:

<a href="#"
   Hover Me

7. Event handlers.

.on('jt-show', function(e, tooltip){
  // after shown
}).on('jt-hide', function(e){
  // after hidden

8. Set the options gloabally.

$.jTippy.defaults.OPTION = VALUE;

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

  • Publication date: 05.10.2018
  • Source