Tooltip

Render tooltip on mouse over or any other event

Import

Source

View source code

Docs

Edit this page

Package

@mantine/core

Usage

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

Label

Color

Position

Placement

With arrow

<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>
  );
}