Tooltip
An anchored description available by pointer and keyboard focus.
Installation
Import from the Reflow workspace package.
Playground
Open demoimport { Tooltip, Button } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
return () => (
<>
<Tooltip content="More information" renderTrigger={(props) => (
<Button {...props}>Hover me</Button>
)} />
</>
)
}Basic
import { Tooltip, Button } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
return () => (
<>
<Tooltip content="Save your changes" renderTrigger={(props) => <Button {...props}>Hover me</Button>} />
</>
)
}Placement
import { Tooltip, Button } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
return () => (
<>
<Tooltip side="top" content="Top" renderTrigger={(props) => <Button {...props}>Top</Button>} />
<Tooltip side="right" content="Right" renderTrigger={(props) => <Button {...props}>Right</Button>} />
<Tooltip side="bottom" content="Bottom" renderTrigger={(props) => <Button {...props}>Bottom</Button>} />
<Tooltip side="left" content="Left" renderTrigger={(props) => <Button {...props}>Left</Button>} />
</>
)
}Rich Content
import { Tooltip, Button } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
return () => (
<>
<Tooltip
content={<span class="tooltip-rich"><span class="tooltip-rich-title">Keyboard shortcut</span><span class="tooltip-rich-hint">⌘ + S</span></span>}
renderTrigger={(props) => <Button {...props}>Save</Button>} />
</>
)
}Follow cursor
import { Tooltip } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
return () => (
<>
<Tooltip followCursor="x" side="top" content="Following x" renderTrigger={(props) => <div {...props}>Move along me</div>} />
<Tooltip followCursor="y" side="right" content="Following y" renderTrigger={(props) => <div {...props}>Move along me</div>} />
</>
)
}Delay
import { Tooltip, Button } from '@rtzll/reflow'
import { type Handle } from 'remix/component'
export function Example(handle: Handle) {
return () => (
<>
<Tooltip delayDuration={0} content="Instant" renderTrigger={(props) => <Button {...props}>No delay</Button>} />
<Tooltip delayDuration={500} content="Slow" renderTrigger={(props) => <Button {...props}>500ms delay</Button>} />
</>
)
}API Reference
Public props for the Reflow implementation. Native controls also accept their standard HTML attributes and Remix event mixes.
Tooltip
| Prop | Type | Default | Description |
|---|---|---|---|
content* | RemixNode | — | Content of the panel, tooltip, or menu item. |
renderTrigger* | (props: TooltipTriggerProps) => RemixNode | — | Return a focusable element, spreading the provided props onto it. |
side | "left" | "right" | "top" | "bottom" | top | Preferred side of the trigger. |
sideOffset | number | 8 | Gap between the trigger and the popup in pixels. |
delayDuration | number | 200 | Delay before showing the tooltip in milliseconds. |
followCursor | boolean | — | Positions the tooltip near the pointer. |
open | boolean | — | Forces the tooltip open (true) or closed (false). Leave undefined for hover and focus behaviour. |
onOpenChange | (open: boolean) => void | — | Called when hover or focus opens or closes the tooltip, before open is applied. |