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

When text is lengthy, it will automatically wrap to multiple lines.

Comment

import { Button } from "stylus-ui/Button";
import { Tooltip, TooltipTrigger, TooltipContent } from "stylus-ui/Tooltip";

export default () => (
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="secondary">Comment</Button>
    </TooltipTrigger>
    <TooltipContent>
      Collaborative comments are only available for Pro Teams users. Upgrade to
      add new comments.
    </TooltipContent>
  </Tooltip>
);

Keep tooltips short

If you find yourself wanting to include a lot of text inside a tooltip, displaying it statically on the page or in a Popover might be a better option.

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

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

delayDuration

number = 700

The duration from when the pointer enters the trigger until the tooltip gets opened.

---

disableHoverableContent

boolean = false

When true, trying to hover the content will result in the tooltip closing as the pointer leaves the trigger.

---

skipDelayDuration

number = 300

How much time a user has to enter another trigger without incurring a delay again.

---

Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

defaultOpen

boolean

---

delayDuration

number = 700

The duration from when the pointer enters the trigger until the tooltip gets opened. This will override the prop with the same name passed to Provider.

---

disableHoverableContent

boolean = false

When true, trying to hover the content will result in the tooltip closing as the pointer leaves the trigger.

---

onOpenChange

(open: boolean) => void

---

open

boolean

---

TooltipTrigger

asChild

boolean = true

---

TooltipContent

align

"center" | "end" | "start"

---

alignOffset

number

---

aria-label

string

A more descriptive label for accessibility purpose

---

arrowPadding

number

---

asChild

boolean = true

---

avoidCollisions

boolean

---

collisionBoundary

null | Element | Boundary[]

---

collisionPadding

number | Partial<Record<"bottom" | "top" | "left" | "right", number>>

---

forceMount

true

Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.

---

hideWhenDetached

boolean

---

onEscapeKeyDown

(event: KeyboardEvent) => void

Event handler called when the escape key is down. Can be prevented.

---

onPointerDownOutside

(event: PointerDownOutsideEvent) => void

Event handler called when the a pointerdown event happens outside of the Tooltip. Can be prevented.

---

side

"bottom" | "top" | "left" | "right"

---

sideOffset

number = 8

---

sticky

"partial" | "always"

---

updatePositionStrategy

"always" | "optimized"

---

TooltipPortal

container

null | Element | DocumentFragment

Specify a container element to portal the content into.

---

forceMount

true

Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.

---