This time I will share jQuery Plugin and tutorial about Cool Configurable Tooltip Plugin – jQuery hint-css.js, hope it will help you in programming stack.
hint-css.js is the jQuery version of the Hint.css library that provides an easy way to create cool, configurable tooltips on any elements.
Key Features:
- Fade in/out transitions.
- Supports HTML content.
- Allows you to specify the max-width & text alignment.
- Easy to implement with no JS call.
How to use it:
1. Install & Download.
5 |
$ npm install hint-css.js --save |
2. Load the necessary JavaScript and CSS files in your HTML file.
1 |
<link rel="stylesheet" href="/path/to/src/hint-css.css" /> |
2 |
<script src="/path/to/jquery.min.js"></script> |
3 |
<script src="/path/to/src/hint-css.js"></script> |
3. To attach a tooltip to an element, just define the tooltip content in the data-hint attribute and the plugin will take care of the rest.
4. Determine the placement of the tooltip. Default: bottom.
01 |
<button data-hint="Tooltip Content" class="hint--top"> |
05 |
<button data-hint="Tooltip Content" class="hint--left"> |
09 |
<button data-hint="Tooltip Content" class="hint--right"> |
5. Determine whether to allow HTML content in the tooltip.
1 |
<button data-hint="<b>HTML</b> Tooltips" |
6. More configuration options to customize the tooltip. Override the default parameters in the hint-css.js as follows:
This awesome jQuery plugin is developed by wenzhixin. For more Advanced Usages, please check the demo page or visit the official website.
