Tooltip

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

Import

Source

View source code

Docs

Edit this page

Package

@mantine/core

Usage

Label

Color

Radius

Position

Placement

Start

Center

End

With arrow

import { Tooltip, Button } from '@mantine/core';

function Demo() {
  return (
    <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:

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)

import { Tooltip, Button } from '@mantine/core';

function Demo() {
  return (
    <>
      <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. To change this logic set opened prop:

import { 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.

import { Tooltip, Button } from '@mantine/core';

function Demo() {
  return (
    <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, it supports the following 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:

Change color

Tooltip supports all colors defined in theme.colors:

Close and open delay

You can delay tooltip open/close events by setting openDelay and closeDelay props in ms. Both props default to 0 and reset if user moves mouse over/out of target element before delay is expired:

import { Button, Tooltip } from '@mantine/core';

function Demo() {
  return (
    <>
      <Tooltip label="Opened after 500ms" openDelay={500}>
        <Button variant="outline">Delay open - 500ms</Button>
      </Tooltip>

      <Tooltip label="Closes after 500ms" closeDelay={500}>
        <Button variant="outline">Delay close - 500ms</Button>
      </Tooltip>
    </>
  );
};

Allow pointer events

By default, pointer events on tooltip are disabled to prevent animations collisions. 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 { useState } from 'react';
import { Tooltip, Button, ActionIcon, Text, useMantineTheme } from '@mantine/core';
import { X } from 'tabler-icons-react';

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
        ml={5}
        style={{ color: theme.colorScheme === 'dark' ? theme.black : theme.white }}
        size="xs"
        onClick={() => setOpened(false)}
      >
        <X size={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="light"
          color="gray"
          style={{ marginTop: theme.spacing.xs }}
          onClick={() => setOpened(true)}
        >
          Reopen tooltip
        </Button>
      )}
    </>
  );
}

FloatingTooltip component

Label

Color

Radius

Position

import { FloatingTooltip, Button } from '@mantine/core';

function Demo() {
  return (
    <FloatingTooltip label="Tooltip">
      <Button variant="outline" color="gray" size="xl">
        With tooltip
      </Button>
    </FloatingTooltip>
  );
}

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.

Provide tooltipId and aria-describedby props to make tooltip accessible:

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

Go back

Popover – @mantine/core

Up next

Blockquote – @mantine/core

Build fully functional accessible web applications faster than ever

About

Contribute Media assets Changelog Releases

Community

Chat on Discord Follow on Twitter Follow on Github GitHub discussions

Project

Mantine UI Documentation Github organization npm organization

Built by Vitaly Rtishchev and these awesome people

Join Discord community

Follow Mantine on Twitter