Tooltip

Floating text that appears near a trigger element on hover or focus, positioned automatically relative to it.

Overview

<Tooltip> wraps a single trigger element and shows floating content positioned relative to it on hover. It also shows on focus regardless of the trigger setting, so keyboard and screen-reader users reach the same content a pointer user gets on hover — set trigger="focus" to disable the hover trigger entirely, for a trigger whose hover state already means something else.

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney''s cleanse vegan chambray. A really ironic artisan whatever keytar scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

import { Tooltip, Link } from '@chassis-ui/react'

export const Example = () => {
  return (
    <p className="fg-subtle">
      Tight pants next level keffiyeh
      <Tooltip content="Tooltip text">
        <Link> you probably </Link>
      </Tooltip>
      haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown.
      Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel
      <Tooltip content="Tooltip text">
        <Link> have a </Link>
      </Tooltip>
      terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu
      biodiesel williamsburg marfa, four loko mcsweeney''s cleanse vegan chambray. A really ironic
      artisan
      <Tooltip content="Tooltip text">
        <Link> whatever keytar </Link>
      </Tooltip>
      scenester farm-to-table banksy Austin
      <Tooltip content="Tooltip text">
        <Link> twitter handle </Link>
      </Tooltip>
      freegan cred raw denim single-origin coffee viral.
    </p>
  )
}

Placement

Set placement to one of the four cardinal directions, each with -start/-end variants for finer alignment along the trigger's edge. Chassis flips the requested direction automatically to keep the tooltip in view when there isn't enough room for it. Directions mirror automatically when Chassis renders in RTL.

import { Tooltip, Button } from '@chassis-ui/react'

export const Example = () => {
  return (
    <>
      <Tooltip content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="top">
        <Button color="secondary">Tooltip on top</Button>
      </Tooltip>
      <Tooltip
        content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
        placement="right"
      >
        <Button color="secondary">Tooltip on right</Button>
      </Tooltip>
      <Tooltip
        content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
        placement="bottom"
      >
        <Button color="secondary">Tooltip on bottom</Button>
      </Tooltip>
      <Tooltip content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="left">
        <Button color="secondary">Tooltip on left</Button>
      </Tooltip>
    </>
  )
}

A tooltip shows and hides itself. Pass visible with onVisibleChange to hold the state yourself: hover, focus and the Escape key are then reported to onVisibleChange with the state they ask for, and the tooltip changes only when visible does.

const [visible, setVisible] = useState(false)

<Tooltip content="Copy link" visible={visible && !menuOpen} onVisibleChange={setVisible}>
  <Button onClick={copy}>Copy</Button>
</Tooltip>

visible alone holds the tooltip shown or hidden whatever the pointer does. In development the first request it drops is logged, since a missing onVisibleChange is more often a mistake than a choice. defaultVisible shows the tooltip on first render and leaves it uncontrolled.

The panel

Every other attribute goes to the panel, the .tooltip element: className, style, id, data-* attributes. A ref on <Tooltip> points to the panel too, and is null while the tooltip is hidden. The trigger keeps its own props and ref.

API

Prop	Type	Default
`children`	`ReactElement<unknown, string \| JSXElementConstructor<any>>`	—
The trigger: a single element, which shows the tooltip on hover and focus.
`content`	`ReactNode`	—
Content node for your component.
`defaultVisible?`	`boolean`	—
Whether the tooltip is shown when it first renders. Use it instead of `visible` when nothing outside needs to control the tooltip.
`offset?`	`[number, number]`	`[0, 6]`
Offset of the tooltip relative to its target, as `[crossAxis, mainAxis]`.
`onHide?`	`(() => void)`	—
Callback fired when the tooltip hides.
`onShow?`	`(() => void)`	—
Callback fired when the tooltip shows.
`onVisibleChange?`	`((visible: boolean) => void)`	—
Callback fired when the tooltip asks to show or hide: hover, focus, blur, the Escape key, or the closing of the dialog it is in. Receives the state it asks for. With `visible` set, the tooltip changes only when `visible` does.
`placement?`	`Placement`	`top`
Describes the preferred placement of your component. Chassis will flip it to keep it in view.
`trigger?`	`"hover" \| "focus"`	—
Tooltips always show on focus, since keyboard/screen-reader users need them too. Set to `'focus'` to disable the hover trigger and show on focus only.
`visible?`	`boolean`	—
Whether the tooltip is shown. Setting it makes the tooltip controlled: it shows and hides only when this changes, so pair it with `onVisibleChange`. Leave it unset, or use `defaultVisible`, for a tooltip that shows and hides itself.

Tooltip

Overview

Placement

Controlling the tooltip

The panel

API

Tooltip