Tooltip Base

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

base.html

<div class="ws-tooltip flex flex-wrap items-center gap-12 p-8">
  <!-- Tooltip Top -->
  <div class="group relative inline-block">
    <button type="button" class="rounded-lg border border-[var(--ws-tooltip-border)] bg-[var(--ws-tooltip-bg)] px-4 py-2 text-sm font-medium text-[var(--ws-tooltip-text)] transition-colors hover:bg-[var(--ws-tooltip-bg)]/80">
      Hover me (top)
    </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-accent)] px-3 py-1.5 text-xs font-medium text-white shadow-lg">
        Tooltip on top
      </div>
      <div class="absolute left-1/2 top-full -translate-x-1/2 border-4 border-transparent border-t-[var(--ws-tooltip-accent)]"></div>
    </div>
  </div>

  <!-- Tooltip Right -->
  <div class="group relative inline-block">
    <button type="button" class="rounded-lg border border-[var(--ws-tooltip-border)] bg-[var(--ws-tooltip-bg)] px-4 py-2 text-sm font-medium text-[var(--ws-tooltip-text)] transition-colors hover:bg-[var(--ws-tooltip-bg)]/80">
      Hover me (right)
    </button>
    <div class="pointer-events-none absolute left-full top-1/2 z-10 ml-2 -translate-y-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-accent)] px-3 py-1.5 text-xs font-medium text-white shadow-lg">
        Tooltip on right
      </div>
      <div class="absolute right-full top-1/2 -translate-y-1/2 border-4 border-transparent border-r-[var(--ws-tooltip-accent)]"></div>
    </div>
  </div>

  <!-- Tooltip Bottom -->
  <div class="group relative inline-block">
    <button type="button" class="rounded-lg border border-[var(--ws-tooltip-border)] bg-[var(--ws-tooltip-bg)] px-4 py-2 text-sm font-medium text-[var(--ws-tooltip-text)] transition-colors hover:bg-[var(--ws-tooltip-bg)]/80">
      Hover me (bottom)
    </button>
    <div class="pointer-events-none absolute left-1/2 top-full z-10 mt-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-accent)] px-3 py-1.5 text-xs font-medium text-white shadow-lg">
        Tooltip on bottom
      </div>
      <div class="absolute bottom-full left-1/2 -translate-x-1/2 border-4 border-transparent border-b-[var(--ws-tooltip-accent)]"></div>
    </div>
  </div>
</div>

Details

Family

tooltip

Tier

base

Kind

component

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

tooltiphoverpopoverhinthelpinfo

Slots

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

CSS-only tooltip using Tailwind group and group-hover utilities. Shows three buttons each with a tooltip in a different position: top, right, and bottom. Tooltips include an arrow triangle made with CSS borders. Hidden by default with opacity-0 invisible and revealed on hover with a smooth transition. Uses --ws-tooltip-accent for the tooltip background and arrow color.