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.

Tooltip Placement

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

Tooltip Custom Animation

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

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.

Tooltip Custom Styles

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

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.

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;
  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;
      | 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",