@zkreations/tooltips/tooltips.css

Tiny and powerful tooltips with pure CSS

/* stylelint-disable */
/* stylelint-enable */
:where([data-tts]) {
  position: relative;
  display: inline-block;
}
:where([data-tts])::before {
  content: attr(aria-label);
}

[data-tts]::before, [data-tts]::after {
  position: absolute;
  inset: var(--t-it, auto) var(--t-ir, auto) var(--t-ib, auto) var(--t-il, auto);
  opacity: var(--t-o);
  z-index: 10;
  pointer-events: none;
  transform: translate(var(--t-tx, 0), var(--t-ty, 0)) scale(var(--t-ts, 1));
  transform-origin: var(--t-to, bottom);
  transition-property: opacity, transform;
  transition-duration: var(--tts-duration, 0.3s);
  will-change: transform;
}
[data-tts]:not(:hover, [data-tts-visible]) {
  --t-o: 0;
  --t-tt: var(--tts-start-translate, 0px);
  --t-ts: var(--tts-start-scale, 1);
}
[data-tts]:hover, [data-tts][data-tts-visible] {
  --t-tt: var(--tts-end-translate, 0px);
  --t-ts: var(--tts-end-scale, 1);
}
[data-tts] {
  --t-p: calc(100% - var(--t-tt));
  --t-bg: var(--tts-background, rgb(0 0 0 / 90%));
  --t-arrow: var(--tts-arrow, 6px);
  --t-offset: var(--tts-arrow-offset, 6px);
}
[data-tts]::before {
  font-size: var(--tts-font-size, 14px);
  font-family: var(--tts-font-family, Roboto, sans-serif);
  color: var(--tts-color, #fff);
  padding: var(--tts-padding, 0.5em 0.75em);
  border-radius: var(--tts-border-radius, 0.25em);
  font-weight: normal;
  line-height: 1.5;
  white-space: nowrap;
  background-color: var(--t-bg);
}
[data-tts]::after {
  content: "";
  border-style: solid;
  border-color: transparent;
  border-width: var(--t-arrow);
}

[data-tts*=up],
[data-tts=""] {
  --t-it: 0;
  --t-il: 50%;
  --t-tx: -50%;
}
[data-tts*=up]::before,
[data-tts=""]::before {
  --t-ty: calc((var(--t-p) + var(--t-arrow)) * -1);
}
[data-tts*=up]::after,
[data-tts=""]::after {
  --t-to: top;
  --t-ty: calc(var(--t-p) * -1);
  border-top-color: var(--t-bg);
  border-bottom-width: 0;
}

[data-tts*=down] {
  --t-ib: 0;
  --t-il: 50%;
  --t-tx: -50%;
}
[data-tts*=down]::before {
  --t-to: top;
  --t-ty: calc(var(--t-p) + var(--t-arrow));
}
[data-tts*=down]::after {
  --t-to: bottom;
  --t-ty: var(--t-p);
  border-bottom-color: var(--t-bg);
  border-top-width: 0;
}

[data-tts=left] {
  --t-il: 0;
  --t-it: 50%;
  --t-ty: -50%;
}
[data-tts=left]::before {
  --t-to: right;
  --t-tx: calc((var(--t-p) + var(--t-arrow)) * -1);
}
[data-tts=left]::after {
  --t-to: left;
  --t-tx: calc(var(--t-p) * -1);
  border-left-color: var(--t-bg);
  border-right-width: 0;
}

[data-tts=right] {
  --t-ir: 0;
  --t-it: 50%;
  --t-ty: -50%;
}
[data-tts=right]::before {
  --t-to: left;
  --t-tx: calc(var(--t-p) + var(--t-arrow));
}
[data-tts=right]::after {
  --t-to: right;
  --t-tx: var(--t-p);
  border-right-color: var(--t-bg);
  border-left-width: 0;
}

[data-tts=up-left],
[data-tts=down-left] {
  --t-il: 0;
  --t-tx: 0;
}
[data-tts=up-left]::after,
[data-tts=down-left]::after {
  --t-il: var(--t-offset);
}

[data-tts=up-left]::before {
  --t-to: bottom left;
}
[data-tts=up-left]::after {
  --t-to: top left;
}

[data-tts=down-left]::before {
  --t-to: top left;
}
[data-tts=down-left]::after {
  --t-to: bottom left;
}

[data-tts=up-right],
[data-tts=down-right] {
  --t-il: auto;
  --t-ir: 0;
  --t-tx: 0;
}
[data-tts=up-right]::after,
[data-tts=down-right]::after {
  --t-ir: var(--t-offset);
}

[data-tts=up-right]::before {
  --t-to: bottom right;
}
[data-tts=up-right]::after {
  --t-to: top right;
}

[data-tts=down-right]::before {
  --t-to: top right;
}
[data-tts=down-right]::after {
  --t-to: bottom right;
}