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.

import { Tooltip, Button } from "@material-tailwind/react";
 
export default function Example() {
  return (
    <Tooltip content="Material Tailwind">
      <Button variant="gradient">Show Tooltip</Button>
    </Tooltip>
  );
}

Props

The following props are available for the tooltip component. These are the custom props that come with 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 its a required prop.

Types

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

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

type dismiss = {
  enabled?: boolean;
  escapeKey?: boolean;
  referencePointerDown?: boolean;
  outsidePointerDown?: boolean;
  ancestorScroll?: boolean;
  bubbles?: boolean;
};

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

textarea

typography