The Strum logo: two oscillating strings from an instrument next to the word Strum
Skip to content
GitHub

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>

Props
Link to this heading

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
string
-
defaultOpen
boolean
-
delayDuration
number
700
disableHoverableContent
boolean
-
onOpenChange
(open: boolean) => void
-
open
boolean
-
position
"bottom" | "left" | "right" | "top"
-
positionOffset
number
-
ref
Ref<HTMLButtonElement>
-

Open
Link to this heading

<Tooltip content="Forced open" open={isOpen}>

  <Button>Forced open</Button>

</Tooltip>

Positions
Link to this heading

<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>

Colors
Link to this heading

<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>
Edit on GitHub