Tailwind CSS 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;
      referencePointerDown: boolean;
      outsidePointerDown: boolean;
      ancestorScroll: boolean;
      bubbles: 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: {
    styles: {
      base: {
        bg: "bg-black",
        color: "text-white",
Edit this page on Github