Tooltip Info

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

info.html

<div class="ws-tooltip-info flex items-center justify-center p-8">
  <!-- Info icon button with rich tooltip -->
  <div class="group relative inline-block">
    <button type="button" class="inline-flex h-9 w-9 items-center justify-center rounded-full border border-[var(--ws-tooltip-border)] bg-[var(--ws-tooltip-bg)] text-[var(--ws-tooltip-accent)] transition-colors hover:bg-[var(--ws-tooltip-accent)]/10" aria-label="More information">
      <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"/></svg>
    </button>
    <div class="pointer-events-none absolute bottom-full left-1/2 z-10 mb-3 -translate-x-1/2 opacity-0 invisible transition-all duration-200 group-hover:opacity-100 group-hover:visible group-hover:pointer-events-auto">
      <div class="w-64 rounded-xl border border-[var(--ws-tooltip-border)] bg-[var(--ws-tooltip-bg)] p-4 shadow-xl">
        <p class="text-sm font-semibold text-[var(--ws-tooltip-text)]">Token System</p>
        <p class="mt-1 text-xs leading-relaxed text-[var(--ws-tooltip-text-soft)]">Design tokens control spacing, color, and typography. They cascade from global defaults to component-level overrides.</p>
        <a href="#" class="mt-2 inline-block text-xs font-medium text-[var(--ws-tooltip-accent)] hover:underline">Learn more &rarr;</a>
      </div>
      <div class="absolute left-1/2 top-full -translate-x-1/2 border-4 border-transparent border-t-[var(--ws-tooltip-border)]"></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

tooltipinforichpopoverhelpdescriptionaction

Slots

Name	Required	Description
trigger	Yes	Info icon button that triggers the tooltip.
title	Yes	Bold title text in the tooltip.
description	Yes	Descriptive paragraph text.
action	No	Optional action link at the bottom.

Rich info tooltip extending the base. Triggered by an info icon button, it displays a wider (w-64) tooltip with a title, description paragraph, and an action link. The tooltip becomes interactive on hover (pointer-events-auto) so the action link is clickable. Uses the same CSS-only hover mechanics with --ws-tooltip-* custom properties.