CSS/HTML Only Animated Tooltip Library

Author: thoughtlessmind
Views Total: 123 views
Official Page: Go to website
Last Update: March 25, 2021
License: MIT


CSS/HTML Only Animated Tooltip Library


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.

<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>
See also  Pure HTML5 / CSS Tooltip Solution

Leave a Reply

Your email address will not be published. Required fields are marked *