Tooltip

Contextual information overlay that appears on hover or focus. Powered by Alpine.js for smooth interactions and accessibility.

Position Variants

Tooltips can be positioned in four directions: top (default), bottom, left, and right.

Top

Bottom

Left

Right

Interactive Examples

Tooltips work with various interactive elements. Hover or focus to see the tooltip.

Link with tooltip

Icon Tooltips

Tooltips are especially useful for icon-only buttons to provide context.

Use Cases

Risk Level Indicators

Low Risk

Moderate Risk

High Risk

Form Field Help

Email Address

Data Visualization

Keyboard Accessibility

Tooltips are fully keyboard accessible. Use Tab to focus elements and see tooltips appear. Press Escape to dismiss.

Try tabbing through these elements:

Press Tab to navigate, Escape to dismiss tooltip

Accessibility

Uses role="tooltip" for proper ARIA semantics
Trigger element has aria-describedby linking to tooltip
Fully keyboard accessible with Tab navigation
Dismissible with Escape key
Shows on both hover and focus events
Smooth transitions that respect prefers-reduced-motion
High contrast dark background ensures readability (WCAG AAA)
Pointer-events disabled on tooltip to prevent interaction issues

Props

Prop	Type	Default	Description
text	string	''	Tooltip content text
position	string	'top'	top, bottom, left, right
class	string	''	Additional CSS classes for wrapper

Usage Example


<x-building-blocks.tooltip text="Helpful information">
    <button>Hover me</button>
</x-building-blocks.tooltip>


<x-building-blocks.tooltip text="This appears below" position="bottom">
    <button>Hover me</button>
</x-building-blocks.tooltip>


<x-building-blocks.tooltip text="Edit item">
    <button class="p-2">
        <svg class="w-5 h-5">...</svg>
    </button>
</x-building-blocks.tooltip>


<x-building-blocks.tooltip text="Learn more about this feature" position="right">
    <a href="#" class="text-primary-600">Documentation</a>
</x-building-blocks.tooltip>