Tooltip

The Tooltip component provides a floating tooltip that appears on hover or focus. It includes built-in delays to avoid flickering, respects hover-escape behavior, and can optionally remain open when hovering over the content itself.

Features

• Hover or focus to show
• Configurable delay (default 700ms)
• Escape key to close
• Optional hoverable content (stay open when hovering tooltip)
• Floating positioning (no clipping)
• Optional arrow pointer
• Skip delay after tooltip closes (fast re-hover)

Usage

import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@loke/ui/tooltip';

export default function Example() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <button>Hover me</button>
        </TooltipTrigger>
        <TooltipContent>Tooltip content</TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

Props

TooltipProvider

Tooltip

TooltipTrigger

TooltipContent

Sub-components

• TooltipProvider: Configures global tooltip defaults
• Tooltip: Container for trigger + content
• TooltipTrigger: Button/element that triggers the tooltip
• TooltipContent: The tooltip panel itself
• TooltipArrow: Optional arrow pointing at trigger

Examples

Basic tooltip

Multiple tooltips

Positioning

Code examples

Basic tooltip

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger>Save</TooltipTrigger>
    <TooltipContent>Save file (Ctrl+S)</TooltipContent>
  </Tooltip>
</TooltipProvider>

With arrow

import { TooltipArrow } from '@loke/ui/tooltip';

<Tooltip>
  <TooltipTrigger asChild>
    <button className="px-2 py-1 border rounded">Info</button>
  </TooltipTrigger>
  <TooltipContent>
    <TooltipArrow />
    More information about this feature
  </TooltipContent>
</Tooltip>

Custom positioning

<Tooltip>
  <TooltipTrigger>Hover here</TooltipTrigger>
  <TooltipContent side="right" sideOffset={8} className="bg-gray-900 text-white px-3 py-2 rounded text-sm">
    Positioned to the right
  </TooltipContent>
</Tooltip>

Controlled tooltip

const [open, setOpen] = React.useState(false);

<Tooltip open={open} onOpenChange={setOpen}>
  <TooltipTrigger>Control me</TooltipTrigger>
  <TooltipContent>This tooltip is controlled</TooltipContent>
</Tooltip>

Keyboard Navigation

• Tab: Move focus to trigger, show tooltip on focus
• Escape: Close tooltip (if focused or hovering content)
• Shift+Tab: Move focus away, hide tooltip

Accessibility

• Trigger has role="button" or native button semantics
• Content has role="status" or role="tooltip" for announcement
• Trigger and content are connected via aria-describedby
• Content is hidden from screen readers initially (shown via aria-hidden)

Best practices

• Keep tooltip text concise (1–2 short lines)
• Use for supplementary info only; never hide critical info in tooltips
• Ensure the trigger itself is clearly interactive (button, icon, etc.)
• Don't use tooltips on touch devices; consider alternative UX
• Test with keyboard (Tab to focus, Escape to close)
• Set disableHoverableContent= if tooltip should close immediately on pointer-out