Author: | Eminemmmmm |
---|---|
Views Total: | 67 views |
Official Page: | Go to website |
Last Update: | July 29, 2022 |
License: | MIT |
Preview:

Description:
A simple, flexible, customizable, animated tooltip JS library that supports nested tooltips, HTML content, custom trigger events, and much more.
How to use it:
1. Install the SimpleTooltip.js.
<link rel="stylesheet" href="./lib/SimpleTooltip.css" /> <script src="./lib/SimpleTooltip.js"></script>
2. Initialize the SimpleTooltip.js.
const instance = new ST.Style({ // options here });
3. Generate tooltips from the title attribute.
<article> <a href="#" title="A Simple Tooltip">Tooltip</a> </article>
4. Available options to config the tooltip.
const instance = new ST.Style({ // additional CSS classes classList: [], // allows HTML content or not useHTML: false, // whether the tooltip has a tip or not tip: true, // target or cursor relativeTo: 'target', // top, right, bottom, or left position: 'right', // An approximate ratio of the height of the tooltip to the width ratio: 0.3, // top color tipColor: 'white', // tip size tipSize: '5px', // apply transitions to the tooltip transition: { delay: [0, 500], duration: [200, 500] }, });
5. More API methods. Available parameters:
- SELECT: Selector(pattern), NodeList(nodes), or a function that takes no input and outputs an array of elements each time it is called.
- CONTENT: Specifies the content and is only required by generate and generateOne.
- EVENT: ‘hover’, ‘focus’, or an array of 2D coordinates [[x1, y1], …, [xn, yn]].
- DEPTH: Specifies the maximum depth of tooltips to be generated.
// generic tooltip generator instance.generate(select, content, event, depth); // generate tooltip from a single element instance.generateOne(node, content, event, depth); // generate tooltip from title attribute instance.generateFromTitle(select, event, depth); // generate tooltip from custom attribute instance.generateFromAttribute(select, attribute, event, depth); // generate tooltip from the last child of the target element instance.generateFromChild(select, event, depth);