• Landing page: http://simple-tooltip.herokuapp.com/
• Documentation: http://simple-tooltip.herokuapp.com/references/

Download the files SimpleTooltip.css and SimpleTooltip.js and load them in the HTML page where you would like to use SimpleTooltip.

Load SimpleTooltip.js before the script using the library. The async option is not recommended. Assume the script using the library is MyScript.js. One possible way is to add the following to head:

<link rel='stylesheet' href='SimpleTooltip.js'>
<script defer src='SimpleTooltip.js'></script>
<script defer src='MyScript.js'></script>

All classes and functions are attached to the object ST.

Any tooltip is generated from an instance of ST.Style.

const style = new ST.Style({ position: 'top' });

See the API page for all options.

Style objects have various methods for generating tooltips. Choose the one that suits your need and pass in arguments accordingly.

// Target: All `a` tags with `title` attribute that is a descendent of an `article` tag 
// Source: The `title` attribute
// Event: Hovering over the `a` tag (default)
// Depth: 3 (default)
style.generateFromTitle(ST.Selector('article a'));

Parameter: select

Let us call the element the tooltip is attached to the "target element". Target elements can be given by

• a single node,
• an array of node (see NodeList),
• a CSS selector (see Selector),
• or a JS function that takes no input and outputs an array of nodes.

Parameter: content (exclusive to generate and generateOne)

The source of the content determines the method you would choose.

The content can be supplied by

• the title attribute of the target element (generateFromTitle),
• any attribute of the target element (generateFromAttribute),
• the last child of the target element (generateFromChild), which should be a template,
• or a JS function mapping elements to strings (the generic generate or generateOne).

The title method is preferred if the content is plain text. The template method is preferred if the content contains HTML. The function method offers the largest flexibility.

Parameter: event

The tooltips can be triggered by

• hovering over the target element ('hover'),
• focusing on an element ('focus'),
• or hovering over a polygon area relative to the target (an array of coordinates).

Parameter: depth

The maximum depth of tooltips to be generated. A tooltip that is not inside another tooltip has depth 1.

Use the function remove or removeOne.

I would like to thank my friend chrt for helping with this project.