Skip to content
Praesepe UI

overlays

Tooltip

Lightweight tooltip wrapper shown on hover and keyboard focus, dismissed by Escape without moving focus, linked via aria-describedby.

Copied!

Examples

Basic tooltip

Top placement on a focusable button.

Copied!
24 units left in Gudang A 
<x-ui.tooltip content="24 units left in Gudang A">
    <button type="button" class="inline-flex h-9 items-center rounded-control border border-border bg-surface-raised px-3.5 text-sm text-fg shadow-2xs">
        Stock status
    </button>
</x-ui.tooltip>

<span
    class="relative inline-flex"
    x-data="{ open: false }"
    x-on:mouseenter="open = true"
    x-on:mouseleave="open = false"
    x-on:focusin="open = true"
    x-on:focusout="open = false"
    x-on:keydown.escape.stop="open = false"
>
    <button type="button" class="inline-flex h-9 items-center rounded-control border border-border bg-surface-raised px-3.5 text-sm text-fg shadow-2xs" aria-describedby="tip-basic">
        Stock status
    </button>
    <span
        id="tip-basic"
        role="tooltip"
        x-show="open"
        x-cloak
        x-transition:enter="transition ease-out duration-150"
        x-transition:enter-start="opacity-0 scale-95 translate-y-1"
        x-transition:enter-end="opacity-100 scale-100 translate-y-0"
        x-transition:leave="transition ease-in duration-100"
        x-transition:leave-start="opacity-100 scale-100"
        x-transition:leave-end="opacity-0 scale-95"
        class="pointer-events-none absolute bottom-full left-1/2 z-50 mb-2 -translate-x-1/2 rounded-control bg-fg px-2 py-1 text-xs text-fg-inverse shadow-md ring-1 ring-black/5"
    >
        24 units left in Gudang A
    </span>
</span>

Positions

top, bottom, left, and right placements.

Copied!
SKU-2048 Lead time 3d MOQ 12 USD 4.20 
<div class="flex flex-wrap items-center justify-center gap-8 py-10">
    <x-ui.tooltip content="SKU-2048" position="top">
        <x-ui.button variant="outline" size="sm">Top</x-ui.button>
    </x-ui.tooltip>
    <x-ui.tooltip content="Lead time 3d" position="bottom">
        <x-ui.button variant="outline" size="sm">Bottom</x-ui.button>
    </x-ui.tooltip>
    <x-ui.tooltip content="MOQ 12" position="left">
        <x-ui.button variant="outline" size="sm">Left</x-ui.button>
    </x-ui.tooltip>
    <x-ui.tooltip content="USD 4.20" position="right">
        <x-ui.button variant="outline" size="sm">Right</x-ui.button>
    </x-ui.tooltip>
</div>

<div class="flex flex-wrap items-center justify-center gap-8 py-10">
    <span class="relative inline-flex" x-data="{ open: false }" x-on:mouseenter="open = true" x-on:mouseleave="open = false" x-on:focusin="open = true" x-on:focusout="open = false">
        <button type="button" class="inline-flex h-9 items-center rounded-control border border-border px-3.5 text-sm shadow-2xs" aria-describedby="tip-top">Top</button>
        <span id="tip-top" role="tooltip" x-show="open" x-cloak x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 scale-95 translate-y-1" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="absolute bottom-full left-1/2 mb-2 -translate-x-1/2 rounded-control bg-fg px-2 py-1 text-xs text-fg-inverse shadow-md ring-1 ring-black/5">SKU-2048</span>
    </span>
    <span class="relative inline-flex" x-data="{ open: false }" x-on:mouseenter="open = true" x-on:mouseleave="open = false" x-on:focusin="open = true" x-on:focusout="open = false">
        <button type="button" class="inline-flex h-9 items-center rounded-control border border-border px-3.5 text-sm shadow-2xs" aria-describedby="tip-bottom">Bottom</button>
        <span id="tip-bottom" role="tooltip" x-show="open" x-cloak x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 scale-95 -translate-y-1" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="absolute top-full left-1/2 mt-2 -translate-x-1/2 rounded-control bg-fg px-2 py-1 text-xs text-fg-inverse shadow-md ring-1 ring-black/5">Lead time 3d</span>
    </span>
    <span class="relative inline-flex" x-data="{ open: false }" x-on:mouseenter="open = true" x-on:mouseleave="open = false" x-on:focusin="open = true" x-on:focusout="open = false">
        <button type="button" class="inline-flex h-9 items-center rounded-control border border-border px-3.5 text-sm shadow-2xs" aria-describedby="tip-left">Left</button>
        <span id="tip-left" role="tooltip" x-show="open" x-cloak x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 scale-95 translate-x-1" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="absolute right-full top-1/2 mr-2 -translate-y-1/2 rounded-control bg-fg px-2 py-1 text-xs text-fg-inverse shadow-md ring-1 ring-black/5">MOQ 12</span>
    </span>
    <span class="relative inline-flex" x-data="{ open: false }" x-on:mouseenter="open = true" x-on:mouseleave="open = false" x-on:focusin="open = true" x-on:focusout="open = false">
        <button type="button" class="inline-flex h-9 items-center rounded-control border border-border px-3.5 text-sm shadow-2xs" aria-describedby="tip-right">Right</button>
        <span id="tip-right" role="tooltip" x-show="open" x-cloak x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 scale-95 -translate-x-1" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="absolute left-full top-1/2 ml-2 -translate-y-1/2 rounded-control bg-fg px-2 py-1 text-xs text-fg-inverse shadow-md ring-1 ring-black/5">USD 4.20</span>
    </span>
</div>

Props API

Component props
Prop Type Default Description
content string required Tooltip text content.
position top|bottom|left|right top Placement of the tooltip bubble relative to the trigger.

Accessibility notes

Architected with WCAG 2.2 AA patterns in mind. These notes document the exact keyboard and ARIA behavior for this component.

  • The tooltip bubble uses role="tooltip" and is referenced from the trigger wrapper with aria-describedby.
  • Shows on mouseenter and focusin. Hides on mouseleave and focusout.
  • Escape dismisses the tooltip while leaving keyboard focus on the trigger.
  • Tooltips should complement visible labels. Do not put essential instructions only in a tooltip.

Built by Praesepe

Architecture & custom software partner

Praesepe uses these exact UI primitives to ship SME dashboards, inventory systems, invoicing desks, and internal tools faster, without rebuilding a design system for every client.

  • Same Blade + Tailwind 4 + Alpine 3 stack you see in this docs site
  • Opinionated for Indonesian SME ops: invoices, stock, roles, approvals
  • Architected with WCAG 2.2 AA patterns in mind for keyboard and ARIA

Talk to the studio

WhatsApp: TODO Email the studio Visit Praesepe