data tooltip

Jump to bottom

Ellicode edited this page Jan 12, 2021 · 2 revisions

`data-tooltip` attribute

The data-tooltip attribute is a main element. Write the tooltip text inside this attribute.

Attributes

Main element.

Syntax

<span class="--ttip-container" data-tooltip="Here is the popup!">Hover me to show the popup!</span>
                               ^^^^^^^^^^^^

CSS

.--ttip-container:before {
+  content: attr(data-tooltip); /* here's the magic */
  position:absolute;
  
  /* vertically center */
  top:50%;
  transform:translateY(-50%);
...

Tooltip.css wiki

Tooltip.css is another library that finishes with ".css".
This library is only a CSS library that can create tooltips.