Skip to contentSkip to navigationSkip to topbar
Figma
Star

Tooltip

Peer review pending

A Tooltip is a page overlay that displays non-interactive clarifying text related to an element that’s in a focused or hovered state.

Version 11.1.1
Github

Installation

Installation page anchor
yarn add @twilio-paste/tooltip - or - yarn add @twilio-paste/core
import {Tooltip} from '@twilio-paste/core/tooltip';

const TooltipExample: React.FC = () => {
  return (
    <Tooltip baseId="tooltip-example" text="Tooltip text...">
      <Button variant="primary">Open Tooltip</Button>
    </Tooltip>
  );
};

Tooltip

Tooltip page anchor

text RequiredRequired

The text content of the Tooltip.

Type
string

element

Overrides the default element name to apply unique styles with the Customization Provider.

Type
string
Default
TOOLTIP

state

The returned state from the useTooltipState hook.

Type
TooltipStateReturn

animated RequiredRequired

If true, animating will be set to true when visible is updated. It'll wait for stopAnimation to be called or a CSS transition ends. If animated is set to a number, stopAnimation will be called only after the same number of milliseconds have passed.

Type
number | boolean

animating RequiredRequired

Whether it's animating or not.

Type
boolean

baseId RequiredRequired

ID that will serve as a base for all the items IDs.

Type
string

hide RequiredRequired

Changes the visible state to false

Type
() => void

place RequiredRequired

Change the placement state.

Type
Dispatch<SetStateAction<Placement>>

placement RequiredRequired

Actual placement.

Type
Placement

setAnimated RequiredRequired

Sets animated.

Type
Dispatch<SetStateAction<number | boolean>>

setBaseId RequiredRequired

Sets baseId.

Type
Dispatch<SetStateAction<string>>

setVisible RequiredRequired

Sets visible.

Type
Dispatch<SetStateAction<boolean>>

show RequiredRequired

Changes the visible state to true

Type
() => void

stopAnimation RequiredRequired

Stops animation. It's called automatically if there's a CSS transition.

Type
() => void

toggle RequiredRequired

Toggles the visible state

Type
() => void

unstable_arrowRef RequiredRequired

The arrow element.

Type
RefObject<HTMLElement | null>

unstable_arrowStyles RequiredRequired

Arrow styles.

Type
CSSProperties

unstable_disclosureRef RequiredRequired

Type
MutableRefObject<HTMLElement | null>

unstable_idCountRef RequiredRequired

Type
MutableRefObject<number>

unstable_originalPlacement RequiredRequired

placement passed to the hook.

Type
Placement

unstable_popoverRef RequiredRequired

The popover element.

Type
RefObject<HTMLElement | null>

unstable_popoverStyles RequiredRequired

Popover styles.

Type
CSSProperties

unstable_referenceRef RequiredRequired

The reference element.

Type
RefObject<HTMLElement | null>

unstable_setTimeout RequiredRequired

Type
Dispatch<SetStateAction<number>>

unstable_timeout RequiredRequired

Type
number

unstable_update RequiredRequired

Type
() => boolean

visible RequiredRequired

Whether it's visible or not.

Type
boolean