breadcrumb-the-shire/web/css/components/app-tooltips.css

@layer components {
  /* CSS-only tooltips — positioned via data-tooltip-pos with arrow indicator. */
[data-tooltip] {
  --app-card-background-color: inherit;
  position: relative;
}

[data-tooltip]::after,
[data-tooltip]::before {
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  position: absolute;
  z-index: 40;
  text-decoration: none;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  background: var(--tooltip-bg);
  color: var(--tooltip-color);
  border: 1px solid var(--tooltip-border);
  border-radius: var(--tooltip-radius);
  box-shadow: var(--tooltip-shadow);
  font-size: 0.75rem;
  padding: 0.35rem 0.6rem;
  white-space: nowrap;
}

[data-tooltip]::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--tooltip-bg);
  border-left: 1px solid var(--tooltip-border);
  border-top: 1px solid var(--tooltip-border);
  transform: rotate(45deg);
}

[data-tooltip]:hover::after,
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::after,
[data-tooltip]:focus-visible::before {
  opacity: 1;
}

[data-tooltip]::after,
[data-tooltip]::before {
  top: 50%;
  left: 100%;
}

[data-tooltip]::after {
  transform: translate(var(--tooltip-offset), -50%);
}

[data-tooltip]::before {
  transform: translate(calc(var(--tooltip-offset) - 4px), -50%) rotate(45deg);
}

[data-tooltip][data-tooltip-pos="top"]::after,
[data-tooltip][data-tooltip-pos="center"]::after {
  bottom: 100%;
  left: 50%;
  top: auto;
  transform: translate(-50%, calc(-1 * var(--tooltip-offset)));
}

[data-tooltip][data-tooltip-pos="top"]::before,
[data-tooltip][data-tooltip-pos="center"]::before {
  bottom: 100%;
  left: 50%;
  top: auto;
  transform: translate(-50%, calc(-1 * (var(--tooltip-offset) - 2px))) rotate(45deg);
}

[data-tooltip][data-tooltip-pos="bottom"]::after {
  top: 100%;
  left: 50%;
  transform: translate(-50%, var(--tooltip-offset));
}

[data-tooltip][data-tooltip-pos="bottom"]::before {
  top: 100%;
  left: 50%;
  transform: translate(-50%, calc(var(--tooltip-offset) - 2px)) rotate(45deg);
}

[data-tooltip][data-tooltip-pos="left"]::after {
  top: 50%;
  right: 100%;
  left: auto;
  transform: translate(calc(-1 * var(--tooltip-offset)), -50%);
}

[data-tooltip][data-tooltip-pos="left"]::before {
  top: 50%;
  right: 100%;
  left: auto;
  transform: translate(calc(-1 * (var(--tooltip-offset) - 2px)), -50%) rotate(45deg);
}
}