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

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

<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 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, 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 delay

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 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 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="light"
          color="gray"
          style={{ marginTop: theme.spacing.xs }}
          onClick={() => setOpened(true)}
        >
          Reopen tooltip
        </Button>
      )}
    </>
  );
}

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

Project

Contribute to Mantine Media assets Changelog Releases

Community

Join Discord community Follow on Twitter Email newsletter GitHub discussions

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

Built by Vitaly Rtishchev and these awesome people

Join Discord community

Follow Mantine on Twitter