Simple Pure CSS Tooltip Library – Tooltips.css

Category: CSS & CSS3 , Tooltip | October 14, 2023
Views Total:123 views
Official Page:Go to website
Last Update:October 14, 2023


Simple Pure CSS Tooltip Library – Tooltips.css


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

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 data-tts aria-label="Tooltip content" class="tts-slideOut">
<a data-tts aria-label="Tooltip content" class="tts-zoomIn">
<a data-tts aria-label="Tooltip content" class="tts-zoomOut">

5. Always display the tooltips.

<a data-tts aria-label="Tooltip content" data-tts-visible>

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);


v4.1.0 (10/14/2023)

  • Refactor

You Might Be Interested In:

Leave a Reply