Simple Pure CSS Tooltip Library – Tooltips.css

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