Tooltip
Usage
Tooltip children
Tooltip requires an element or a component as a single child – strings, fragments, numbers and multiple elements/components are not supported and will throw error. Custom components must provide a prop to get root element ref, all Mantine components support ref out of the box.
Required ref prop
Custom components that are rendered inside Tooltip
are required to support ref
prop:
Use forwardRef
function to forward ref to root element:
Position and color
Offset
Arrow
Controlled
Change events
Events that trigger tooltip can be changed with events
prop, it accepts an object
with the following properties that determine which events will trigger tooltip:
hover
– mouse hover event,true
by defaultfocus
– focus/blur events excluding clicks on the target element,false
by defaulttouch
– events for touchscreen devices,false
by default
Multiline
To enable multiline mode set multiline
prop to enable line breaks and width
prop to set tooltip width:
Inline
Set inline
prop to use Tooltip
with inline elements:
Change transition
Tooltip is built with Transition component, it supports transitionProps
props:
All available premade transitions:
Close and open delay
You can delay tooltip open/close events by setting openDelay
and closeDelay
props in ms:
Tooltip delay group
Tooltip.Group
component can be used to sync open and close delays for multiple tooltips:
Floating tooltip
Tooltip.Floating
component has the same API as Tooltip component but tooltip will follow mouse:
Custom components with Tooltip
If you want to build a component that can be used with Tooltip use forwardRef or other prop that will allow to get root element ref. This logic is applied to Tooltip and Tooltip.Floating components:
Accessibility
Tooltip follows WAI-ARIA recommendations:
- Tooltip body has
role="tooltip"
attribute - Target element has
aria-describedby
attribute Tooltip.Floating
is ignored by screen readers
By default, Tooltip is not triggered by focus events and thus users who use screen reader
or navigate with keyboard will not be able to get tooltip content. Set events
prop to enable
focus/blur tooltip events:
Tooltip component props
Name | Type | Description |
---|---|---|
arrowOffset | number | Arrow offset |
arrowPosition | "center" | "side" | Arrow position * |
arrowRadius | number | Arrow radius |
arrowSize | number | Arrow size |
children * | ReactNode | Target element |
closeDelay | number | Close delay in ms |
color | MantineColor | Key of theme.colors |
disabled | boolean | Disables tooltip |
events | { hover: boolean; focus: boolean; touch: boolean; } | Determines which events will be used to show tooltip |
inline | boolean | Set if tooltip is attached to an inline element |
keepMounted | boolean | If set tooltip will not be unmounted from the DOM when it is hidden, display: none styles will be added instead |
label * | ReactNode | Tooltip label |
multiline | boolean | Defines whether content should be wrapped on to the next line |
offset | number | Space between target element and tooltip |
onPositionChange | (position: FloatingPosition) => void | Called when tooltip position changes |
openDelay | number | Open delay in ms |
opened | boolean | Controls opened state |
portalProps | Omit<PortalProps, "children" | "withinPortal"> | Props to pass down to the portal when withinPortal is true |
position | "bottom" | "left" | "right" | "top" | "bottom-end" | "bottom-start" | "left-end" | "left-start" | "right-end" | "right-start" | "top-end" | "top-start" | Tooltip position relative to target element (default) or mouse (floating) |
positionDependencies | any[] | useEffect dependencies to force update tooltip position |
radius | number | "xs" | "sm" | "md" | "lg" | "xl" | Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default |
refProp | string | Key of the prop that should be used to get element ref |
transitionProps | Partial<Omit<TransitionProps, "mounted">> | Props added to Transition component that used to animate tooltip presence, use to configure duration and animation type, { duration: 100, transition: 'fade' } by default |
width | number | "auto" | Tooltip width |
withArrow | boolean | Determines whether component should have an arrow |
withinPortal | boolean | Determines whether tooltip should be rendered within Portal |
zIndex | ZIndex | Tooltip z-index |
Tooltip.Floating component props
Name | Type | Description |
---|---|---|
children * | ReactNode | Target element |
color | MantineColor | Key of theme.colors |
disabled | boolean | Disables tooltip |
label * | ReactNode | Tooltip label |
multiline | boolean | Defines whether content should be wrapped on to the next line |
offset | number | Offset from mouse |
portalProps | Omit<PortalProps, "children" | "withinPortal"> | Props to pass down to the portal when withinPortal is true |
position | "bottom" | "left" | "right" | "top" | "bottom-end" | "bottom-start" | "left-end" | "left-start" | "right-end" | "right-start" | "top-end" | "top-start" | Tooltip position relative to target element (default) or mouse (floating) |
radius | number | "xs" | "sm" | "md" | "lg" | "xl" | Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default |
refProp | string | Key of the prop that should be used to get element ref |
width | number | "auto" | Tooltip width |
withinPortal | boolean | Determines whether tooltip should be rendered within Portal |
zIndex | ZIndex | Tooltip z-index |
Tooltip.Group component props
Name | Type | Description |
---|---|---|
children * | ReactNode | <Tooltip /> components |
closeDelay | number | Close delay in ms |
openDelay | number | Open delay in ms |
Tooltip component Styles API
Name | Static selector | Description |
---|---|---|
tooltip | .asuikit-Tooltip-tooltip | Tooltip body |
arrow | .asuikit-Tooltip-arrow | Tooltip arrow |