CSS/HTML Only Animated Tooltip Library

Preview:

Description:

A tiny, themeable, CSS-only tooltip library that is easy to implement and configure via HTML data attribute.

How to use it:

1. Load the core stylesheet ‘styles.min.css’ in the document.

<link rel=”stylesheet” href=”dist/styles.min.css” />

2. Define the tooltip content in the ‘data-css-only-tooltip’ attribute. That’s it.

<button class="btn" data-css-only-tooltip="Default Tooltip">Default</button>

3. Use Dark Theme instead.

<button class="btn" data-css-only-tooltip="Dark Theme" data-css-only-tooltip-props="dark">Dark Theme</button>

4. Determine the position of the tooltip.

• top
• right
• bottom
• left

<button class="btn" data-css-only-tooltip="Top Tooltip" data-css-only-tooltip-props="top">Top Tooltip</button>

5. Combine the Theme and Position options:

<button class="btn" data-css-only-tooltip="Dark Theme + Top Position" data-css-only-tooltip-props="dark top">Dark Theme + Top Position</button>