Tooltip

Renders tooltip at given element on mouse over or any other event
Import

Usage

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

Color
Placement
<Tooltip
opened
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:

top-start
top-center
top-end
right-start
right-center
right-end
bottom-start
bottom-center
bottom-end
left-start
left-center
left-end

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={3} 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:

fade
scale
scale-y
scale-x
skew-up
skew-down
rotate-left
rotate-right
slide-down
slide-up
slide-left
slide-right
pop-bottom-left
pop-bottom-right
pop-top-left
pop-top-right

Change color

You can choose any color defined in theme.colors:

Dark
Gray
Red
Pink
Grape
Violet
Indigo
Blue
Cyan
Teal
Green
Lime
Yellow
Orange

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 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 { 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 { 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>
);
}
Build fully functional accessible web applications with ease
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback