/

All things Tooltip

Components

TooltipDisplay information related to an anchor element when the element receives keyboard focus or the mouse hovers over it. This component is based on the WAI-ARIA Tooltip Pattern.

Examples

Menu with TooltipRendering Menu with a Tooltip that appears when hovering over the MenuButton component by combining it with the TooltipAnchor component.

Tooltip with Framer MotionAbstracting Tooltip into a reusable custom component that uses Framer Motion to create smooth initial and exit animations.

API Reference

useTooltipContextReturns the tooltip store from the nearest tooltip container.

useTooltipStoreCreates a tooltip store.

TooltipRenders a tooltip element.

TooltipAnchorRenders an element that will be described by a Tooltip component. This component will also be used as the reference to position the tooltip on the screen.

TooltipArrowRenders an arrow inside a Tooltip component.

TooltipProviderProvides a tooltip store to Tooltip components.