The Tooltip component displays contextual information when users hover over or focus on an element. Built on bits-ui, it includes auto-hide functionality when scrolling.
Components
The root component that manages tooltip state.
import { Tooltip } from '@invopop/popui'
import { TooltipTrigger } from '@invopop/popui'
TooltipContent
The tooltip content container with customizable placement.
import { TooltipContent } from '@invopop/popui'
side
'top' | 'bottom' | 'left' | 'right'
default:"'top'"
The preferred side of the trigger to render against
The distance in pixels from the trigger
Additional CSS classes to apply to the tooltip
Additional CSS classes to apply to the tooltip arrow
import { TooltipAutoHide } from '@invopop/popui'
Usage
<script>
import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@invopop/popui'
</script>
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<button>Hover me</button>
</TooltipTrigger>
<TooltipContent>
This is a helpful tooltip
</TooltipContent>
</Tooltip>
</TooltipProvider>
Placement Options
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<button>Top tooltip</button>
</TooltipTrigger>
<TooltipContent side="top">
Appears on top
</TooltipContent>
</Tooltip>
</TooltipProvider>
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<button>Bottom tooltip</button>
</TooltipTrigger>
<TooltipContent side="bottom" sideOffset={8}>
Appears on bottom with offset
</TooltipContent>
</Tooltip>
</TooltipProvider>
Auto-Hide Behavior
Use TooltipAutoHide to automatically close the tooltip when scrolling:
<script>
import { TooltipAutoHide, TooltipTrigger, TooltipContent } from '@invopop/popui'
</script>
<TooltipAutoHide>
<TooltipTrigger>
<button>Scroll-aware tooltip</button>
</TooltipTrigger>
<TooltipContent>
This tooltip will hide when you scroll
</TooltipContent>
</TooltipAutoHide>
With Custom Styling
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<button>Custom styled</button>
</TooltipTrigger>
<TooltipContent
class="bg-blue-500 text-white"
arrowClasses="bg-blue-500"
>
Custom colors and styles
</TooltipContent>
</Tooltip>
</TooltipProvider>
Implementation Details
- Built on bits-ui Tooltip primitive
- Includes an arrow indicator pointing to the trigger
- Portal-based rendering ensures tooltips appear above other content
- Default styling includes dark background with inverse text colors
- Auto-hide variant listens to scroll events with capture phase