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.
import { Tooltip, Button } from "@material-tailwind/react";
export function TooltipDefault() {
return (
<Tooltip content="Material Tailwind">
<Button>Show Tooltip</Button>
</Tooltip>
);
}You can change the position of the Tooltip component using the placement prop.
import { Tooltip, Button } from "@material-tailwind/react";
export function TooltipPlacement() {
return (
<>
<div className="mb-3 flex gap-3">
<Tooltip content="Material Tailwind" placement="top">
<Button>Top</Button>
</Tooltip>
<Tooltip content="Material Tailwind" placement="top-start">
<Button>Top Start</Button>
</Tooltip>
<Tooltip content="Material Tailwind" placement="top-end">
<Button>Top End</Button>
</Tooltip>
</div>
<div className="mb-3 flex gap-3">
<Tooltip content="Material Tailwind" placement="right">
<Button>Right</Button>
</Tooltip>
<Tooltip content="Material Tailwind" placement="right-start">
<Button>Right Start</Button>
</Tooltip>
<Tooltip content="Material Tailwind" placement="right-end">
<Button>Right End</Button>
</Tooltip>
</div>
<div className="mb-3 flex gap-3">
<Tooltip content="Material Tailwind" placement="bottom">
<Button>Bottom</Button>
</Tooltip>
<Tooltip content="Material Tailwind" placement="bottom-start">
<Button>Bottom Start</Button>
</Tooltip>
<Tooltip content="Material Tailwind" placement="bottom-end">
<Button>Bottom End</Button>
</Tooltip>
</div>
<div className="flex gap-3">
<Tooltip content="Material Tailwind" placement="left">
<Button>Left</Button>
</Tooltip>
<Tooltip content="Material Tailwind" placement="left-start">
<Button>Left Start</Button>
</Tooltip>
<Tooltip content="Material Tailwind" placement="left-end">
<Button>Left End</Button>
</Tooltip>
</div>
</>
);
}You can modify the open/close state animation for Tooltip component using the animate prop.
import { Tooltip, Button } from "@material-tailwind/react";
export default function TooltipCustomAnimation() {
return (
<Tooltip
content="Material Tailwind"
animate={{
mount: { scale: 1, y: 0 },
unmount: { scale: 0, y: 25 },
}}
>
<Button>Show Tooltip</Button>
</Tooltip>
);
}This tooltip example is perfect if you want to avoid cluttering the screen. It provides additional info about a specific element on the website.
import { Tooltip, Typography } from "@material-tailwind/react";
export function TooltipWithHelperIcon() {
return (
<Tooltip
content={
<div className="w-80">
<Typography color="white" className="font-medium">
Material Tailwind
</Typography>
<Typography
variant="small"
color="white"
className="font-normal opacity-80"
>
Material Tailwind is an easy to use components library for Tailwind
CSS and Material Design.
</Typography>
</div>
}
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
className="h-5 w-5 cursor-pointer text-blue-gray-500"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
/>
</svg>
</Tooltip>
);
}You can use the className prop to add custom styles to the Tooltip component.
import { Tooltip, Typography } from "@material-tailwind/react";
export function TooltipCustomStyles() {
return (
<Tooltip
placement="bottom"
className="border border-blue-gray-50 bg-white px-4 py-3 shadow-xl shadow-black/10"
content={
<div className="w-80">
<Typography color="blue-gray" className="font-medium">
Material Tailwind
</Typography>
<Typography
variant="small"
color="blue-gray"
className="font-normal opacity-80"
>
Material Tailwind is an easy to use components library for Tailwind
CSS and Material Design.
</Typography>
</div>
}
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
className="h-5 w-5 cursor-pointer text-blue-gray-500"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
/>
</svg>
</Tooltip>
);
}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.
| 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. |
import type { TooltipProps } from "@material-tailwind/react";type placement =
| "top"
| "top-start"
| "top-end"
| "right"
| "right-start"
| "right-end"
| "bottom"
| "bottom-start"
| "bottom-end"
| "left"
| "left-start"
| "left-end";type offset =
| number
| {
mainAxis?: number;
crossAxis?: number;
alignmentAxis?: number | null;
};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;
};
};type animate = {
mount?: object;
unmount?: object;
};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;
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;
};
}import type { TooltipStylesType } from "@material-tailwind/react";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",
},
},
},
};