Tooltip

Anatomy

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger />
    <TooltipContent />
  </Tooltip>
</TooltipProvider>

Note

<TooltipProvider> should be declared at the app level, and does not need to be redeclared within components. In the codebase, however, many existing instances of tooltips redeclare this component. This is ticketed to be fixed in DS-345.

Usage

To display a tooltip, compose <Tooltip>, <TooltipTrigger>, and <TooltipContent>. It default to displaying centered above the trigger and adjust position to avoid colliding with the edge of the viewport. Pressing esc or clicking away will close the tooltip.

import { Button } from "stylus-ui/Button";
import { Tooltip, TooltipTrigger, TooltipContent } from "stylus-ui/Tooltip";
import { faUserPlus } from "@fortawesome/pro-regular-svg-icons";

export default () => (
  <Tooltip>
    <TooltipTrigger>
      <Button icon={faUserPlus} variant="secondary" />
    </TooltipTrigger>
    <TooltipContent>Add user</TooltipContent>
  </Tooltip>
);

Position

Tooltips can display on every side of the trigger.

import { Button } from "stylus-ui/Button";
import { Tooltip, TooltipTrigger, TooltipContent } from "stylus-ui/Tooltip";
import {
  faArrowLeft,
  faArrowUp,
  faArrowDown,
  faArrowRight,
} from "@fortawesome/pro-regular-svg-icons";

export default () => (
  <div className="flex items-center gap-1">
    <Tooltip>
      <TooltipTrigger>
        <Button icon={faArrowLeft} variant="secondary" />
      </TooltipTrigger>
      <TooltipContent side="left">Left</TooltipContent>
    </Tooltip>
    <div className="flex flex-col gap-1">
      <Tooltip>
        <TooltipTrigger>
          <Button icon={faArrowUp} variant="secondary" />
        </TooltipTrigger>
        <TooltipContent side="top">Top</TooltipContent>
      </Tooltip>
      <Tooltip>
        <TooltipTrigger>
          <Button icon={faArrowDown} variant="secondary" />
        </TooltipTrigger>
        <TooltipContent side="bottom">Bottom</TooltipContent>
      </Tooltip>
    </div>
    <Tooltip>
      <TooltipTrigger>
        <Button icon={faArrowRight} variant="secondary" />
      </TooltipTrigger>
      <TooltipContent side="right">Right</TooltipContent>
    </Tooltip>
  </div>
);

Size

You can display a smaller tooltip by setting the variant of <TooltipContent> to "compact".

import { Button } from "stylus-ui/Button";
import { Tooltip, TooltipTrigger, TooltipContent } from "stylus-ui/Tooltip";
import { faUserPlus } from "@fortawesome/pro-regular-svg-icons";

export default () => (
  <Tooltip>
    <TooltipTrigger>
      <Button icon={faUserPlus} variant="secondary" size="small" />
    </TooltipTrigger>
    <TooltipContent variant="compact">Add user</TooltipContent>
  </Tooltip>
);

Delay

Use the delayDuration prop to control the time it takes for the tooltip to open.

import { Button } from "stylus-ui/Button";
import { Tooltip, TooltipTrigger, TooltipContent } from "stylus-ui/Tooltip";
import { faUserPlus } from "@fortawesome/pro-regular-svg-icons";

export default () => (
  // Display tooltip instantly
  <Tooltip delayDuration={0}>
    <TooltipTrigger>
      <Button icon={faUserPlus} variant="secondary" />
    </TooltipTrigger>
    <TooltipContent>Add user</TooltipContent>
  </Tooltip>
);

API Reference

TooltipProvider

Wraps the app to provide global functionality to tooltips.

Prop	Type	Default
delayDuration	number	700
disableHoverableContent	boolean
skipDelayDuration	number	300

Tooltip

Contains all the parts of a tooltip.

Prop	Type	Default
children	ReactNode
defaultOpen	boolean	300
delayDuration	number	100
disableHoverableContent	boolean
onOpenChange	(open: boolean) => void
open	boolean

TooltipTrigger

The button that toggles the tooltip. By default, <TooltipContent> will position itself against the trigger.

Inherits properties from HTMLButtonElement.

Prop	Type	Default
asChild	boolean	true

TooltipContent

The component that pops out when the tooltip is open.

Inherits properties from HTMLElement.

Prop	Type	Default
align	"start""center""end"	"center"
alignOffset	number	0
aria-label	string
asChild	boolean	false
avoidCollisions	boolean	true
className	string
collisionBoundary	ElementnullArray<Element | null>	[]
collisionPadding	numberPartial<Record<Side, number>>	0
forceMount	boolean
hideWhenDetached	boolean	false
onEscapeKeyDown	(event: KeyboardEvent) => void
onPointerDownOutside	(event: PointerDownOutsideEvent) => void
side	"top""right""bottom""left"	"top"
sideOffset	number	10
sticky	"partial""always"	"partial"
variant	"default""compact"	"default"