Simple & Multiple Triggers Supported jQuery Tooltip Plugin – jTippy

Looking for a affordable website?

GET STARTED
www.codingexpertz.com
Simple & Multiple Triggers Supported jQuery Tooltip Plugin – jTippy

File Size: 142KB

Total Views: 8

Date Created:

Last Modified Date:

Official Website: Go to website

License: MIT

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:

  • Simple, lightweight and easy to implement.
  • Supports multiple triggers(click, hover, focus, hoverfocus).
  • Predefined multiple themes (black, lt-gray, white, blue, green, red)
  • It has many sizes(tiny, small, medium, large).
  • Backdrops supported(black, white, blurred) – Only apply to trigger:’click’
  • Tooltip hide/show events

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();

Leave a comment

Your email address will not be published. Required fields are marked *

STAYUPDATED

Receive all our future posts instantly in your inbox. Enter your email to enroll.