Author: | zkreations |
---|---|
Views Total: | 51 views |
Official Page: | Go to website |
Last Update: | October 14, 2023 |
License: | MIT |
Preview:

Description:
Tooltips.css is a simple, plain, lightweight CSS/SCSS library that displays nice-looking tooltips with optional directions on any DOM elements when hovered.
How to use it:
1. Add the minified version of Tooltips.css to your HTML page.
<link rel="stylesheet" href="tooltips.min.css">
2. Add the data-tts
attribute to the element in which you want to display the tooltip. You’re able to add any content into the tooltip popup via both aria-label
attributes.
<a data-tts aria-label="Tooltip content"> ... </a>
3. Set the direction of the tooltips.
<span data-tts="up" aria-label="Tooltip content">Top</span> <span data-tts="left" aria-label="Tooltip content">Left</span> <span data-tts="right" aria-label="Tooltip content">Right</span> <span data-tts="down" aria-label="Tooltip content">Bottom</span> <span data-tts="up-left" aria-label="Tooltip content">Top Left</span> <span data-tts="up-right" aria-label="Tooltip content">Top Right</span> <span data-tts="down-left" aria-label="Tooltip content">Bottom Left</span> <span data-tts="down-right" aria-label="Tooltip content">Bottom Right</span>
4. Apply custom animations to the tooltips.
.tts-slideIn { --tts-start-translate: -1rem; } .tts-slideOut { --tts-start-translate: 1rem; } .tts-zoomIn { --tts-start-scale: .9; } .tts-zoomOut { --tts-start-scale: 1.1; }
<a data-tts aria-label="Tooltip content" class="tts-slideIn"> ... </a> <a data-tts aria-label="Tooltip content" class="tts-slideOut"> ... </a> <a data-tts aria-label="Tooltip content" class="tts-zoomIn"> ... </a> <a data-tts aria-label="Tooltip content" class="tts-zoomOut"> ... </a>
5. Always display the tooltips.
<a data-tts aria-label="Tooltip content" data-tts-visible> ... </a>
6. Customize the tooltips by overriding the default variables.
[data-tts] { --t-po: calc(100% - var(--t-tt)); --t-bg: var(--tts-background, rgba(0, 0, 0, 0.9)); --t-arrow: var(--tts-arrow, 6px); --t-offset: var(--tts-arrow-offset, 6px); }
Changelog:
v4.1.0 (10/14/2023)
- Refactor