A Fully Configurable jQuery Tooltip Plugin - Tooltip.js
File Size: | 264 KB |
---|---|
Views Total: | 1461 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Tooltip.js is a simple yet robust jQuery plugin that attaches a highly customizable and themeable tooltip to any DOM elements.
Features:
- Auto hide after a timeout, with an optional countdown timer.
- Dismissable with a close button.
- Custom tooltip content.
- Can be placed anywhere on your web page.
- 5 built-in themes: primary, default, success, info, warning and danger.
- Custom show / hide animation speed.
Basic usage:
1. Include the required stylesheet tooltip.css
in the head
and the script tooltip.js
at the bottom of the web page.
<head> ... <link href="css/tooltip.css" rel="stylesheet"> ... </head> <body> ... <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="js/tooltip.js"></script> </body>
2. Shows a basic tooltip with custom content.
$('#SELECTOR').tooltip('show', 'I am a basic tooltip!');
3. Call the function to create a tooltip with configuration options.
$('#SELECTOR').tooltip({ // Auto hide when timeout // Type: Boolean autohide: true, // Auto show after initialized // Type: Boolean autoshow: true, // Tooltip content // Type: String content: '', // Show countdown view // Type: Boolean countdown: false, // Allow to dismiss the tooltip before it is closed automatically // Type: Boolean dismissible: false, // Define the time of the tooltip showing (3 seconds by default) // Type: Number duration: 3000, // Fix the tooltip (Only available for body element) // Type: Boolean fixed: true, // Offset of the tooltip from its parent // Type: Number offset: 10, // Position of the tooltip (horizontal and vertical) // Type: String // Options: // 'left top', 'center top', 'right top', // 'left middle', 'center middle', 'right middle', // 'left bottom', 'center bottom', 'right bottom' position: 'center top', // Style of the tooltip // Type: String // Options: 'default', 'primary', 'success', 'info', 'warning', 'danger' style: 'default', // Z index of the tooltip // Type: Number zIndex: 1024 });
4. Public methods.
// Show a tooltip with custom options $('#SELECTOR').tooltip('show', 'I am a tooltip!', { // options here }); // Hide the tooltip $('#SELECTOR').tooltip('hide') // Destroy the plugin $('#SELECTOR').tooltip('destroy')
5. Events
// fired immediately when the show instance method is called. show.tooltip // fired when the tooltip has been made visible to the user // will wait for CSS transitions to complete shown.tooltip // fired immediately when the hide instance method has been called. hide.tooltip // fired when the tooltip has finished being hidden from the user // will wait for CSS transitions to complete hidden.tooltip
Change log:
v0.0.2 (2015-06-22)
- Support a shortcut for showing message content.
- Improve the options argument of "show" method.
This awesome jQuery plugin is developed by fengyuanchen. For more Advanced Usages, please check the demo page or visit the official website.