Simple Flexible jQuery Tooltip Plugin For jQuery - Cooltip.js
File Size: | 17.1 KB |
---|---|
Views Total: | 857 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Cooltip.js is a simple, flexible jQuery plugin to enhance the default browser tooltips that allow you to display any content inside your tooltips.
Features:
- Custom trigger events: hover or click.
- Accepted directions are top, right, bottom, and left.
- Fully styleable via CSS.
How to use it:
1. Load the jQuery cooltip.js after you have jQuery javascript library loaded.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="js/cooltip.js"></script>
2. By default, the tooltip content is extracted from your element's title
attribute if not set in config.
<a href="#" id="demo" title="Here is a tooltip!">Hover me</a>
3. The core CSS styles for the tooltip. You can modify or override the CSS rules displayed below to create your own tooltip styles.
.cooltip { position: absolute; background-color: rgba(20, 20, 20, 0.85); color: #fff; padding: 0.5rem 0.7rem; display: none; font-size: 0.85rem; } .cooltip.direction-top { margin-top: -0.7rem; } .cooltip.direction-top:after { position: absolute; content: ""; width: 0; height: 0; border-top: 0.4rem solid rgba(20, 20, 20, 0.85); border-right: 0.4rem solid transparent; border-bottom: 0.4rem solid transparent; border-left: 0.4rem solid transparent; top: 100%; left: calc(50% - .4rem); } .cooltip.direction-right { margin-left: 0.7rem; } .cooltip.direction-right:after { position: absolute; content: ""; width: 0; height: 0; border-top: 0.4rem solid transparent; border-right: 0.4rem solid rgba(20, 20, 20, 0.85); border-bottom: 0.4rem solid transparent; border-left: 0.4rem solid transparent; top: calc(50% - .4rem); right: 100%; } .cooltip.direction-bottom { margin-top: 0.7rem; } .cooltip.direction-bottom:after { position: absolute; content: ""; width: 0; height: 0; border-top: 0.4rem solid transparent; border-right: 0.4rem solid transparent; border-bottom: 0.4rem solid rgba(20, 20, 20, 0.85); border-left: 0.4rem solid transparent; bottom: 100%; left: calc(50% - .4rem); } .cooltip.direction-left { margin-left: -0.7rem; } .cooltip.direction-left:after { position: absolute; content: ""; width: 0; height: 0; border-top: 0.4rem solid transparent; border-right: 0.4rem solid transparent; border-bottom: 0.4rem solid transparent; border-left: 0.4rem solid rgba(20, 20, 20, 0.85); top: calc(50% - .4rem); left: 100%; } .cooltip.direction-top.align-right:after, .cooltip.direction-bottom.align-right:after { left: 0.3rem; } .cooltip.direction-top.align-left:after, .cooltip.direction-bottom.align-left:after { left: initial; right: 0.3rem; } .cooltip.direction-right.align-top:after, .cooltip.direction-left.align-top:after { top: initial; bottom: 0.3rem; } .cooltip.direction-right.align-bottom:after, .cooltip.direction-left.align-bottom:after { top: 0.3rem; }
3. Initialize the tooltip plugin with default settings.
$("a#demo").cooltip({ // options here });
4. Default config options.
$("a#demo").cooltip({ // top, right, left, bottom direction: 'top', // hover, focus or click trigger: 'hover', // top, right, left, bottom align: 'middle', // custom tooltip attribute attr: 'title', // additional CSS "class": '', // enable the tooltip enabled: true });
5. Public methods.
// Append a class or multiple classes (separated by spaces) to a tooltip. $(".has-tip").cooltip('addClass', 'success'); // Remove a class or multiple classes (separated by spaces) to a tooltip. $(".has-tip").cooltip('removeClass', 'success'); // Destroy the plugin $(".has-tip").cooltip('destroy'); // Enable a tooltip that was previously disabled to show on triggering event. $(".has-tip").cooltip('enable'); // Disable a tooltip from showing on the triggering event. $(".has-tip").cooltip('disable'); // Update the tooltip contents. Useful for when the target's title (or corresponding tooltip attribute) is changed. $(".has-tip").cooltip('update');
Change logs:
2015-08-30
- Only set zindex if set through JS to avoid CSS overriding
2015-08-27
- Add removal watch for target to prevent tooltips from persisting on target removal
2015-08-25
- Add destroy method
- Update 'update' method to reposition tooltip
2015-08-23
- Added trigger event 'focus'; improved custom classes
This awesome jQuery plugin is developed by jaketlarson. For more Advanced Usages, please check the demo page or visit the official website.