Tooltip.mdx

group	package	title	order	slug	category	description	componentPrefix	props	import	source	docs	styles
mantine-core	@mantine/core	Tooltip	1	/core/tooltip/	overlay	Renders tooltip at given element on mouse over or other event	Tooltip	Tooltip TooltipFloating TooltipGroup	import { Tooltip } from '@mantine/core';	mantine-core/src/Tooltip/Tooltip.tsx	core/Tooltip.mdx	Tooltip

import { TooltipDemos } from '@mantine/demos';

Usage

Tooltip children

Tooltip requires an element or a component as a single child – strings, fragments, numbers and multiple elements/components are not supported and will throw error. Custom components must provide a prop to get root element ref, all Mantine components support ref out of the box.

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

function Demo() {
  return (
    <>
      <Tooltip label="OK">
        <button>Native button – ok</button>
      </Tooltip>

      <Tooltip label="OK">
        <Badge>Mantine component – ok</Badge>
      </Tooltip>

      <Tooltip label="Throws">Raw string, NOT OK – will throw error</Tooltip>

      {/* Number, NOT OK – will throw error */}
      <Tooltip label="Throws">{2}</Tooltip>

      <Tooltip label="Throws">
        <>Fragment, NOT OK, will throw error</>
      </Tooltip>

      <Tooltip label="Throws">
        <div>More that one node</div>
        <div>NOT OK, will throw error</div>
      </Tooltip>
    </>
  );
}

Required ref prop

Custom components that are rendered inside Tooltip are required to support ref prop:

// Example of code that WILL NOT WORK
import { Tooltip } from '@mantine/core';

function MyComponent() {
  return <div>My component</div>;
}

// This will not work – MyComponent does not support ref
function Demo() {
  return (
    <Tooltip label="Does not work">
      <MyComponent />
    </Tooltip>
  );
}

Use forwardRef function to forward ref to root element:

// Example of code that will work
import { forwardRef } from 'react';
import { Tooltip } from '@mantine/core';

const MyComponent = forwardRef<HTMLDivElement>((props, ref) => (
  <div ref={ref} {...props}>
    My component
  </div>
));

// Works correctly – ref is forwarded
function Demo() {
  return (
    <Tooltip label="Works fine">
      <MyComponent />
    </Tooltip>
  );
}

Position and color

Offset

Arrow

Controlled

Change events

Events that trigger tooltip can be changed with events prop, it accepts an object with the following properties that determine which events will trigger tooltip:

• hover – mouse hover event, true by default
• focus – focus/blur events excluding clicks on the target element, false by default
• touch – events for touchscreen devices, false by default

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

function Demo() {
  return (
    <Tooltip label="Tooltip" events={{ hover: true, focus: true, touch: false }}>
      <button>target</button>
    </Tooltip>
  );
}

Multiline

To enable multiline mode set multiline prop to enable line breaks and width prop to set tooltip width in px:

Inline

Set inline prop to use Tooltip with inline elements:

Change transition

Tooltip is built with Transition component, it supports transition and transitionDuration props:

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

function Demo() {
  return (
    <Tooltip transition="skew-up" transitionDuration={300}>
      <button>target</button>
    </Tooltip>
  );
}

All available premade transitions:

Close and open delay

You can delay tooltip open/close events by setting openDelay and closeDelay props in ms:

Tooltip delay group

Tooltip.Group component can be used to sync open and close delays for multiple tooltips:

Floating tooltip

Tooltip.Floating component has the same API as Tooltip component but tooltip will follow mouse:

Custom components with Tooltip

If you want to build a component that can be used with Tooltip use forwardRef or other prop that will allow to get root element ref. This logic is applied to Tooltip and Tooltip.Floating components:

import React, { forwardRef } from 'react';
import { Tooltip } from '@mantine/core';

// forwardRef function will allow to get root element ref
const MyBadge = forwardRef<HTMLDivElement, { color: string }>(({ color }, ref) => (
  <div ref={ref} color={color}>
    Badge
  </div>
));

// other props can also be used
function MyOtherBadge({
  color,
  innerRef,
}: {
  color: string;
  innerRef?: React.ForwardedRef<HTMLDivElement>;
}) {
  return (
    <div ref={innerRef} color={color}>
      Badge
    </div>
  );
}

function Demo() {
  return (
    <>
      <Tooltip label="Can be used as is">
        <MyBadge color="red" />
      </Tooltip>

      <Tooltip label="refProp is required" refProp="innerRef">
        <MyOtherBadge color="orange" />
      </Tooltip>
    </>
  );
}

Usage with Next.js Link

Tooltip will not work with native Next.js Link, instead you should use NextLink component:

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

function Demo() {
  return (
    <>
      <Tooltip label="Plain NextLink">
        <NextLink href="/">Next.js link</NextLink>
      </Tooltip>

      <Tooltip label="NextLink as another component">
        <Button component={NextLink} href="/">
          Next.js link
        </Button>
      </Tooltip>
    </>
  );
}

Accessibility

Tooltip follows WAI-ARIA recommendations:

• Tooltip body has role="tooltip" attribute
• Target element has aria-describedby attribute
• Tooltip.Floating is ignored by screen readers

By default, Tooltip is not triggered by focus events and thus users who use screen reader or navigate with keyboard will not be able to get tooltip content. Set events prop to enable focus/blur tooltip events:

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

// Tooltip will be visible for screen readers
function Demo() {
  return (
    <Tooltip label="Tooltip" events={{ hover: true, focus: true, touch: false }}>
      <button>target</button>
    </Tooltip>
  );
}