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.
interface TooltipStylesType {
defaultProps: {
interactive: string;
placement: string;
offset:
| 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;
};
}import type { TooltipStylesType } from "@material-tailwind/react";const theme = {
tooltip: {
styles: {
base: {
bg: "bg-black",
color: "text-white",
},
},
},
};