Tailwind CSS Tooltip - Props

Tooltip Props

The following props are available for 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 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;
  referencePointerDown?: boolean;
  outsidePointerDown?: boolean;
  ancestorScroll?: boolean;
  bubbles?: boolean;
};

Types - Animate

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

Examples

Checkout different examples for tooltip components.

Theme

Learn how to customize the theme and styles for tooltip components.

Edit this page on Github