Feature-rich JavaScript Tooltip Library – SimpleTooltip.js

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);