Author: | thoughtlessmind |
---|---|
Views Total: | 129 views |
Official Page: | Go to website |
Last Update: | March 25, 2021 |
License: | MIT |
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>