Custom Dark/Light Tooltips In jQuery - Tooltip.js
File Size: | 8.64 KB |
---|---|
Views Total: | 1343 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

An easy to use jQuery plugin to replace and enhance the default browser tooltips with custom styles, positions, themes, and trigger events.
How to use it:
1. Import the stylesheet tooltip.css
and JavaScript tooltip.js
into the HTML file.
<link href="tooltip.css" rel="stylesheet" /> <script src="/path/to/jquery.min.js"></script> <script src="tooltip.js"></script>
2. Attact a custom tooltip to the desired element and define the tooltip content in the data-tooltip
attribute.
<button data-tooltip="Tooltip Content"> Default </button>
3. Initialize the plugin and done.
$('[data-tooltip]').tooltip({ // options here });
4. Specify the placement of the tooltip. All position options:
- 'top' (default)
- 'topLeft'
- 'topRight'
- 'right'
- 'rightTop'
- 'rightBottom'
- 'bottom'
- 'bottomLeft'
- 'bottomRight'
- 'left'
- 'leftTop'
- 'leftBottom'
$('[data-tooltip]').tooltip({ placement: 'top' });
5. Use the Light theme instead.
$('[data-tooltip]').tooltip({ theme: 'light' });
6. Automatically re-position the tooltip when there is NOT enough space. Default: true.
$('[data-tooltip]').tooltip({ autoPlace: true });
7. Customize the trigger event:
- 'hover' (Default)
- 'click'
- 'focus'
$('[data-tooltip]').tooltip({ trigger: 'click' });
8. Customize the time to wait before showing the tooltip when triggered. Default: 10ms.
$('[data-tooltip]').tooltip({ delay: 100 });
This awesome jQuery plugin is developed by shulkme. For more Advanced Usages, please check the demo page or visit the official website.