Skip to contentSkip to navigationSkip to topbar
Paste assistant Assistant
Figma
Star

Tooltip

Version 11.1.1GithubStorybookPeer 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.

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
any
Default
TOOLTIP

state

The returned state from the useTooltipState hook.

Type
TooltipStateReturn