Tooltip

A popup to display information related to an element when in focus or hover state
<Tooltip content="Tooltip content looks like this">
<Button>Tooltip trigger</Button>
</Tooltip>

The <Tooltip /> component inherits the props of the Radix UI Tooltip.Content Primitive, which are not listed below.

<Tooltip>

import { Tooltip } from '@strum/react';
name
type
default
align
"center" | "end" | "start"
-
alignOffset
number
-
content*
Required
string
-
defaultOpen
boolean
-
delayDuration
number
700
disableHoverableContent
boolean
-
onOpenChange
(open: boolean) => void
-
open
boolean
-
position
"bottom" | "left" | "right" | "top"
-
positionOffset
number
-
ref
Ref<HTMLButtonElement>
-
<Tooltip content="Forced open" open={isOpen}>
<Button>Forced open</Button>
</Tooltip>
<Stack direction="horizontal">
<Tooltip content="Top positioned" position="top">
<Button>Top</Button>
</Tooltip>
<Tooltip content="Right positioned" position="right">
<Button>Right</Button>
</Tooltip>
<Tooltip content="Bottom positioned" position="bottom">
<Button>Bottom</Button>
</Tooltip>
<Tooltip content="Left positioned" position="left">
<Button>Left</Button>
</Tooltip>
</Stack>
<Stack direction="horizontal">
<Tooltip color="accent" content="Accent tooltip">
<Button color="accent">Accent</Button>
</Tooltip>
<Tooltip color="neutral" content="Neutral tooltip">
<Button color="neutral">Neutral</Button>
</Tooltip>
</Stack>