fooltips

Usage

<span data-tooltip="top" aria-label="Lorem ipsum">Simple text</span>

Attributes

Base

data-tooltip

Direction

data-tooltip="top"
data-tooltip="top-right"
data-tooltip="top-left"
data-tooltip="left"
data-tooltip="right"
data-tooltip="bottom-right"
data-tooltip="bottom-left"
data-tooltip="bottom"

Multiline

data-tooltip-multiline

States

data-is-tooltiped

Classes

States

is-tooltiped

Variables

:root {
  --tooltip-multiline-width: 250px;
  --tooltip-background-color: rgba(0, 0, 0, .8);
  --tooltip-color: #fff;
  --tooltip-padding: 5px 8px;
  --tooltip-border-radius: 4px;
  --tooltip-font-size: 0.7rem;
  --tooltip-z-index: 10;
  --tooltip-content: aria-label;
}