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