CSS/HTML Only Animated Tooltip Library

Category: CSS & CSS3 , Tooltip | March 25, 2021
Views Total:146 views
Official Page:Go to website
Last Update:March 25, 2021


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.

  • 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>

You Might Be Interested In:

Leave a Reply