Tooltip

Render tooltip on mouse over or any other event
Import

Usage

Use tooltip to provide additional information for target element or component:

Color
<Tooltip
label="Tooltip"
withArrow
>
<Button variant="outline" color="gray" size="xl">
With tooltip
</Button>
</Tooltip>

Position and placement

Tooltip position relative to target element is defined by:

  • position – tooltip side – top, bottom, right or left, defaults to top
  • placement – tooltip placement relative to position – start, center or end, defaults to center
  • gutter – space between tooltip and target element in px, defaults to 5px
<Tooltip position="bottom" placement="end" gutter={10} />

All available positions and placements:

Arrow

Tooltip arrow is controlled by:

  • withArrow – set to true if arrow should be rendered
  • arrowSize – arrow size in px, defaults to 4px
  • position and placement – define arrow position (see previous example)
<Tooltip label="Default arrow" withArrow opened>
<Button variant="outline">Default arrow</Button>
</Tooltip>
<Tooltip label="Arrow with size" withArrow arrowSize={5} opened>
<Button variant="outline">With size</Button>
</Tooltip>

Controlled

By default tooltip is displayed when mouse is over target element. You can change this logic by setting opened prop:

import React, { useState } from 'react';
import { Tooltip, Button } from '@mantine/core';
function Demo() {
const [opened, setOpened] = useState(true);
return (
<Tooltip label="Ctrl + J" opened={opened}>
<Button variant="outline" onClick={() => setOpened((o) => !o)}>
Toggle color scheme
</Button>
</Tooltip>
);
}

Multiline

By default tooltip white-space property is set to nowrap. To change that use:

  • wrapLines – to enable line breaks
  • width – to define tooltip width in px

Note that, multiline tooltips may require different transitions for better UX.

<Tooltip
wrapLines
width={220}
withArrow
transition="fade"
transitionDuration={200}
label="Use this button to save this information in your profile, after that you will be able to access it any time and share it via email."
>
<Button variant="outline">Multiline tooltip</Button>
</Tooltip>

Change transition

Tooltip is built with Transition component.

You can change transitions with props:

  • transition – predefined transition name or transition object
  • transitionDuration – transition duration in ms, defaults to 100ms
  • transitionTimingFunction – timing function, defaults to theme.transitionTimingFunction
<Tooltip transition="skew-up" transitionDuration={300} transitionTimingFunction="ease" />

All available predefined transitions demo:

Change color

You can choose any color defined in theme.colors:

Close delay

You can delay tooltip unmount on mouse leave with delay prop: set delay in ms. Delay defaults to 0 and reset if user hovers over target element before delay is expired:

<Tooltip data-mantine-composable label="Ctrl + J" delay={500}>
<Button variant="outline">Toggle color scheme</Button>
</Tooltip>

Allow pointer events

By defaults pointer events on tooltip are disabled to prevent animations collisions. If you need to use interactive elements inside tooltip set allowPointerEvents prop.

In this example tooltip acts more like popover – it is controlled and can be closed with control inside tooltip:

import React, { useState } from 'react';
import { Cross1Icon } from '@modulz/radix-icons';
import { Tooltip, Button, ActionIcon, Text, useMantineTheme } from '@mantine/core';
function Demo() {
const [opened, setOpened] = useState(true);
const theme = useMantineTheme();
const tooltip = (
<div style={{ display: 'flex', marginRight: -5 }}>
<Text
size="xs"
style={{ color: theme.colorScheme === 'dark' ? theme.colors.dark[9] : theme.white }}
>
Use this button to save this information in your profile, after that you will be able to
access it any time and share it via email.
</Text>
<ActionIcon
style={{ marginLeft: 5, color: theme.colorScheme === 'dark' ? theme.black : theme.white }}
size="xs"
onClick={() => setOpened(false)}
>
<Cross1Icon style={{ width: 12, height: 12 }} />
</ActionIcon>
</div>
);
return (
<>
<Tooltip
label={tooltip}
opened={opened}
allowPointerEvents
withArrow
wrapLines
transition="rotate-left"
transitionDuration={250}
width={220}
gutter={theme.spacing.xs}
>
<Button onClick={() => setOpened(false)}>Save to profile</Button>
</Tooltip>
{!opened && (
<Button
variant="link"
color="gray"
style={{ marginTop: theme.spacing.xs }}
onClick={() => setOpened(true)}
>
Reopen tooltip
</Button>
)}
</>
);
}

Get element ref

You can get both tooltip and root element refs with elementRef and tooltipRef props. Use it to customize behavior, for example, with use-click-outside hook.

import React, { useRef } from 'react';
import { Tooltip } from '@mantine/core';
function Demo() {
const tooltipRef = useRef();
const rootElementRef = useRef();
return <Tooltip elementRef={rootElementRef} tooltipRef={tooltipRef} />;
}

Accessibility

Do not place any important information in tooltip. Component is unmounted from the dom and is not visible to screen readers in default configuration.

If you want to make tooltip accessible use controlled variant, open tooltip on focus, provide tooltipId and aria-describedby props:

import React, { useState } from 'react';
import { Tooltip, Button } from '@mantine/core';
function Demo() {
const [opened, setOpened] = useState(false);
return (
<Tooltip opened={opened} label="Hidden knowledge" tooltipId="tooltip-id">
<Button
aria-describedby="tooltip-id"
onFocus={() => setOpened(true)}
onMouseEnter={() => setOpened(true)}
onBlur={() => setOpened(false)}
onMouseLeave={() => setOpened(false)}
>
I have tooltip
</Button>
</Tooltip>
);
}