Tooltip
A Tooltip is a page overlay that displays non-interactive clarifying text related to an element that’s in a focused or hovered state.
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>
);
};
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
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
animated
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
baseId
ID that will serve as a base for all the items IDs.
- Type
string
gutter
Offset between the reference and the popover on the main axis. Should not be combined with unstable_offset.
- Type
number
placement
Actual placement.
- Type
Placement
unstable_fixed
Whether or not the popover should have position set to fixed.
- Type
boolean
unstable_flip
Flip the popover's placement when it starts to overlap its reference element.
- Type
boolean
unstable_offset
Offset between the reference and the popover: [main axis, alt axis]. Should not be combined with gutter.
- Type
[string | number, string | number]
unstable_preventOverflow
Prevents popover from being positioned outside the boundary.
- Type
boolean
unstable_timeout
- Type
number
visible
Whether it's visible or not.
- Type
boolean
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
animated
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
baseId
ID that will serve as a base for all the items IDs.
- Type
string
gutter
Offset between the reference and the popover on the main axis. Should not be combined with unstable_offset.
- Type
number
placement
Actual placement.
- Type
Placement
unstable_fixed
Whether or not the popover should have position set to fixed.
- Type
boolean
unstable_flip
Flip the popover's placement when it starts to overlap its reference element.
- Type
boolean
unstable_offset
Offset between the reference and the popover: [main axis, alt axis]. Should not be combined with gutter.
- Type
[string | number, string | number]
unstable_preventOverflow
Prevents popover from being positioned outside the boundary.
- Type
boolean
unstable_timeout
- Type
number
visible
Whether it's visible or not.
- Type
boolean
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
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.