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.

openbooleanMakes the tooltip open, when tooltip is controlledundefined
handlerfunctionChange open state for controlled tooltipundefined
contentnodeAdd content for tooltipundefined
interactivebooleanMake tooltip interactivefalse
placementPlacementChange tooltip placementtop
offsetOffsetChange tooltip offset from it's handler5
dismissDismissChange dismiss listeners when clicking outsideundefined
animateAnimateChange tooltip animationundefined
classNamestringAdd custom className for tooltip''
childrennodeThe element that tooltip will reference toNo 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;
Edit this page on Github