tooltip.mdx

title	Tailwind CSS Tooltip for React - Material Tailwind
description	Customise your web projects with our easy-to-use tooltip component for Tailwind CSS and React using Material Design guidelines.
navigation	tooltip tooltip-placement tooltip-custom-animation tooltip-with-helper-icon tooltip-custom-styles tooltip-props types-placement types-offset types-dismiss types-animate tooltip-theme tooltip-theme-object-type tooltip-theme-customization more-examples
github	tooltip
prev	timeline
next	typography

# Tailwind CSS Tooltip - React

Customise your web projects with an easy-to-use and responsive Tailwind CSS Tooltip!

A Tooltip is a small pop-up element that appears while the user moves the mouse pointer over an element. Use it when you want to specify extra information about something when the user moves the mouse pointer over an element.

See below our example that will help you create a simple Tooltip for your React project.

<CodePreview link="tooltip#tooltip" component={<TooltipExamples.TooltipDefault />}>

import { Tooltip, Button } from "@material-tailwind/react";

export function TooltipDefault() {
  return (
    <Tooltip content="Material Tailwind">
      <Button>Show Tooltip</Button>
    </Tooltip>
  );
}

---

## Tooltip Placement

You can change the position of the Tooltip component using the placement prop.

<CodePreview link="tooltip#tooltip-placement" component={<TooltipExamples.TooltipPlacement />}>

import { Tooltip, Button } from "@material-tailwind/react";

export function TooltipPlacement() {
  return (
    <>
      <div className="mb-3 flex gap-3">
        <Tooltip content="Material Tailwind" placement="top">
          <Button>Top</Button>
        </Tooltip>
        <Tooltip content="Material Tailwind" placement="top-start">
          <Button>Top Start</Button>
        </Tooltip>
        <Tooltip content="Material Tailwind" placement="top-end">
          <Button>Top End</Button>
        </Tooltip>
      </div>
      <div className="mb-3 flex gap-3">
        <Tooltip content="Material Tailwind" placement="right">
          <Button>Right</Button>
        </Tooltip>
        <Tooltip content="Material Tailwind" placement="right-start">
          <Button>Right Start</Button>
        </Tooltip>
        <Tooltip content="Material Tailwind" placement="right-end">
          <Button>Right End</Button>
        </Tooltip>
      </div>
      <div className="mb-3 flex gap-3">
        <Tooltip content="Material Tailwind" placement="bottom">
          <Button>Bottom</Button>
        </Tooltip>
        <Tooltip content="Material Tailwind" placement="bottom-start">
          <Button>Bottom Start</Button>
        </Tooltip>
        <Tooltip content="Material Tailwind" placement="bottom-end">
          <Button>Bottom End</Button>
        </Tooltip>
      </div>
      <div className="flex gap-3">
        <Tooltip content="Material Tailwind" placement="left">
          <Button>Left</Button>
        </Tooltip>
        <Tooltip content="Material Tailwind" placement="left-start">
          <Button>Left Start</Button>
        </Tooltip>
        <Tooltip content="Material Tailwind" placement="left-end">
          <Button>Left End</Button>
        </Tooltip>
      </div>
    </>
  );
}

---

## Tooltip Custom Animation

You can modify the open/close state animation for Tooltip component using the animate prop.

<CodePreview link="tooltip#tooltip-custom-animation" component={<TooltipExamples.TooltipCustomAnimation />}>

import { Tooltip, Button } from "@material-tailwind/react";

export default function TooltipCustomAnimation() {
  return (
    <Tooltip
      content="Material Tailwind"
      animate={{
        mount: { scale: 1, y: 0 },
        unmount: { scale: 0, y: 25 },
      }}
    >
      <Button>Show Tooltip</Button>
    </Tooltip>
  );
}

---

## Tooltip with Helper Icon

This tooltip example is perfect if you want to avoid cluttering the screen. It provides additional info about a specific element on the website.

<CodePreview component={<TooltipExamples.TooltipWithHelperIcon />}>

import { Tooltip, Typography } from "@material-tailwind/react";

export function TooltipWithHelperIcon() {
  return (
    <Tooltip
      content={
        <div className="w-80">
          <Typography color="white" className="font-medium">
            Material Tailwind
          </Typography>
          <Typography
            variant="small"
            color="white"
            className="font-normal opacity-80"
          >
            Material Tailwind is an easy to use components library for Tailwind
            CSS and Material Design.
          </Typography>
        </div>
      }
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        strokeWidth={2}
        className="h-5 w-5 cursor-pointer text-blue-gray-500"
      >
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
        />
      </svg>
    </Tooltip>
  );
}

---

## Tooltip Custom Styles

You can use the className prop to add custom styles to the Tooltip component.

<CodePreview component={<TooltipExamples.TooltipCustomStyles />}>

import { Tooltip, Typography } from "@material-tailwind/react";

export function TooltipCustomStyles() {
  return (
    <Tooltip
      placement="bottom"
      className="border border-blue-gray-50 bg-white px-4 py-3 shadow-xl shadow-black/10"
      content={
        <div className="w-80">
          <Typography color="blue-gray" className="font-medium">
            Material Tailwind
          </Typography>
          <Typography
            variant="small"
            color="blue-gray"
            className="font-normal opacity-80"
          >
            Material Tailwind is an easy to use components library for Tailwind
            CSS and Material Design.
          </Typography>
        </div>
      }
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        strokeWidth={2}
        className="h-5 w-5 cursor-pointer text-blue-gray-500"
      >
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
        />
      </svg>
    </Tooltip>
  );
}

---

## Tooltip Props

The following props are available for tooltip component. These are the custom props that we've added for the tooltip component and you can use all the other native props as well.

Attribute	Type	Description	Default
open	boolean	Makes the tooltip open, when tooltip is controlled	undefined
handler	function	Change open state for controlled tooltip	undefined
content	node	Add content for tooltip	undefined
interactive	boolean	Make tooltip interactive	false
placement	Placement	Change tooltip placement	top
offset	Offset	Change tooltip offset from it's handler	5
dismiss	Dismiss	Change dismiss listeners when clicking outside	undefined
animate	Animate	Change tooltip animation	undefined
className	string	Add custom className for tooltip	''
children	node	The element that tooltip will reference to	No default value it's a required prop.

For TypeScript Only

import type { TooltipProps } from "@material-tailwind/react";

---

## Types - Placement

type placement =
  | "top"
  | "top-start"
  | "top-end"
  | "right"
  | "right-start"
  | "right-end"
  | "bottom"
  | "bottom-start"
  | "bottom-end"
  | "left"
  | "left-start"
  | "left-end";

---

## Types - Offset

type offset =
  | number
  | {
      mainAxis?: number;
      crossAxis?: number;
      alignmentAxis?: number | null;
    };

---

## Types - Dismiss

type dismissType = {
  enabled?: boolean;
  escapeKey?: boolean;
  referencePress?: boolean;
  referencePressEvent?: 'pointerdown' | 'mousedown' | 'click';
  outsidePress?: boolean | ((event: MouseEvent) => boolean);
  outsidePressEvent?: 'pointerdown' | 'mousedown' | 'click';
  ancestorScroll?: boolean;
  bubbles?: boolean | {
      escapeKey?: boolean;
      outsidePress?: boolean;
  };
};

---

## Types - Animate

type animate = {
  mount?: object;
  unmount?: object;
};

---

## Tooltip Theme

Learn how to customize the theme and styles for tooltip components, the theme object for tooltip components has two main objects:

A. The defaultProps object for setting up the default value for props of tooltip component.
B. The styles object for customizing the theme and styles of tooltip component.

You can customize the theme and styles of tooltip components by adding Tailwind CSS classes as key paired values for objects.

## Tooltip Theme Object Type

interface TooltipStylesType {
  defaultProps: {
    interactive: string;
    placement: string;
    offset:
      | number
      | {
          mainAxis: number;
          crossAxis: number;
          alignmentAxis: number;
        };
    dismiss: {
      enabled: boolean;
      escapeKey: boolean;
      referencePress: boolean;
      referencePressEvent: 'pointerdown' | 'mousedown' | 'click';
      outsidePress: boolean | ((event: MouseEvent) => boolean);
      outsidePressEvent: 'pointerdown' | 'mousedown' | 'click';
      ancestorScroll: boolean;
      bubbles: boolean | {
          escapeKey: boolean;
          outsidePress: boolean;
      };
    };
    animate: {
      mount: object;
      unmount: object;
    };
    className: string;
  };
  styles: {
    base: object;
  };
}

For TypeScript Only

import type { TooltipStylesType } from "@material-tailwind/react";

---

## Tooltip Theme Customization

const theme = {
  tooltip: {
    defaultProps: {
      interactive: false,
      placement: "top",
      offset: 5,
      dismiss: {},
      animate: {
        unmount: {},
        mount: {},
      },
      className: "",
    },
    styles: {
      base: {
        bg: "bg-black",
        py: "py-1.5",
        px: "px-3",
        borderRadius: "rounded-lg",
        fontFamily: "font-sans",
        fontSize: "text-sm",
        fontWeight: "font-normal",
        color: "text-white",
        outline: "focus:outline-none",
        overflowWrap: "break-words",
        zIndex: "z-[999]",
        whiteSpace: "whitespace-normal",
      },
    },
  },
};

---

## Explore More Tailwind CSS Examples

Check out more tooltip component examples from Material Tailwind Blocks.