Tooltip Dark

Fetch pattern JSON: curl https://webspire.de/patterns/tooltip/dark.json

dark.html

<div class="ws-tooltip-dark flex flex-wrap items-center gap-12 p-8">
  <!-- Tooltip on a link -->
  <div class="group relative inline-block">
    <a href="#" class="text-sm font-medium text-[var(--ws-tooltip-accent)] underline decoration-dotted underline-offset-4 transition-colors hover:text-[var(--ws-tooltip-accent)]/80">
      Learn more
    </a>
    <div class="pointer-events-none absolute bottom-full left-1/2 z-10 mb-2 -translate-x-1/2 opacity-0 invisible transition-all duration-200 group-hover:opacity-100 group-hover:visible">
      <div class="whitespace-nowrap rounded-lg bg-[var(--ws-tooltip-bubble-bg)] px-3 py-1.5 text-xs font-medium text-[var(--ws-tooltip-bubble-text)] shadow-lg">
        Opens documentation
      </div>
      <div class="absolute left-1/2 top-full -translate-x-1/2 border-4 border-transparent border-t-[var(--ws-tooltip-bubble-bg)]"></div>
    </div>
  </div>

  <!-- Tooltip on an icon button -->
  <div class="group relative inline-block">
    <button type="button" class="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-[var(--ws-tooltip-border)] bg-[var(--ws-tooltip-bg)] text-[var(--ws-tooltip-text-soft)] transition-colors hover:text-[var(--ws-tooltip-text)]" aria-label="Settings">
      <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.248a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.248a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/></svg>
    </button>
    <div class="pointer-events-none absolute bottom-full left-1/2 z-10 mb-2 -translate-x-1/2 opacity-0 invisible transition-all duration-200 group-hover:opacity-100 group-hover:visible">
      <div class="whitespace-nowrap rounded-lg bg-[var(--ws-tooltip-bubble-bg)] px-3 py-1.5 text-xs font-medium text-[var(--ws-tooltip-bubble-text)] shadow-lg">
        Settings
      </div>
      <div class="absolute left-1/2 top-full -translate-x-1/2 border-4 border-transparent border-t-[var(--ws-tooltip-bubble-bg)]"></div>
    </div>
  </div>

  <!-- Tooltip on a badge -->
  <div class="group relative inline-block">
    <span class="inline-flex items-center rounded-full border border-[var(--ws-tooltip-border)] bg-[var(--ws-tooltip-bg)] px-3 py-1 text-xs font-medium text-[var(--ws-tooltip-text)] cursor-default">
      Beta
    </span>
    <div class="pointer-events-none absolute bottom-full left-1/2 z-10 mb-2 -translate-x-1/2 opacity-0 invisible transition-all duration-200 group-hover:opacity-100 group-hover:visible">
      <div class="whitespace-nowrap rounded-lg bg-[var(--ws-tooltip-bubble-bg)] px-3 py-1.5 text-xs font-medium text-[var(--ws-tooltip-bubble-text)] shadow-lg">
        This feature is in beta
      </div>
      <div class="absolute left-1/2 top-full -translate-x-1/2 border-4 border-transparent border-t-[var(--ws-tooltip-bubble-bg)]"></div>
    </div>
  </div>
</div>

Details

Family

tooltip

Tier

enhanced

Kind

component

Extends

tooltip/base

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

tooltipdarkhoverpopoverhintcontrast

Slots

Name	Required	Description
trigger	Yes	The element that triggers the tooltip on hover.
content	Yes	Tooltip text content.

Dark-themed tooltip variant extending the base. Uses bg-gray-900 text-white for high contrast. Demonstrates tooltips on three different trigger elements: a dotted-underline link, a settings icon button, and a “Beta” badge. Same CSS-only hover mechanics as the base.