Tooltip

Anatomy

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

Note

<TooltipProvider> is declared at the app level, and does not need to be redeclared within components in the frontend. If you’re working with the extension, you may need to redeclare <TooltipProvider> depending on where the component is rendered.

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 asChild>
      <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 asChild>
        <Button icon={faArrowLeft} variant="secondary" />
      </TooltipTrigger>
      <TooltipContent side="left">Left</TooltipContent>
    </Tooltip>
    <div className="flex flex-col gap-1">
      <Tooltip>
        <TooltipTrigger asChild>
          <Button icon={faArrowUp} variant="secondary" />
        </TooltipTrigger>
        <TooltipContent side="top">Top</TooltipContent>
      </Tooltip>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button icon={faArrowDown} variant="secondary" />
        </TooltipTrigger>
        <TooltipContent side="bottom">Bottom</TooltipContent>
      </Tooltip>
    </div>
    <Tooltip>
      <TooltipTrigger asChild>
        <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 asChild>
      <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 asChild>
      <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"