Customise your web projects with an easy-to-use and responsive Tailwind CSS React 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 default function Example() {
return (
<Tooltip
trigger={
<button className="rounded-xl bg-brand-500 px-5 py-3 text-base font-medium text-white transition duration-200 hover:bg-brand-600 active:bg-brand-700 dark:bg-brand-400 dark:text-white dark:hover:bg-brand-300 dark:active:bg-brand-200">
Open Tooltip
</button>
}
content={
<p className="dark:text-white">
This is a very beautiful tooltip, show some love.
</p>
}
/>
);
}You can change the position of the Tooltip component using the placement prop.
<Fragment>
<div className="mb-3 flex gap-3">
<Tooltip
trigger={
<button className="bg-brand-500 hover:bg-brand-600 active:bg-brand-700 dark:bg-brand-400 dark:hover:bg-brand-300 dark:active:bg-brand-200 rounded-xl px-5 py-3 text-base font-medium text-white transition duration-200 dark:text-white">
Right
</button>
}
content={
<p className="dark:text-white">
This is a very beautiful tooltip, show some love.
</p>
}
placement="right"
/>
<Tooltip
trigger={
<button className="bg-brand-500 hover:bg-brand-600 active:bg-brand-700 dark:bg-brand-400 dark:hover:bg-brand-300 dark:active:bg-brand-200 rounded-xl px-5 py-3 text-base font-medium text-white transition duration-200 dark:text-white">
Right-Start
</button>
}
content={
<p className="dark:text-white">
This is a very beautiful tooltip, show some love.
</p>
}
placement="right-start"
/>
<Tooltip
trigger={
<button className="bg-brand-500 hover:bg-brand-600 active:bg-brand-700 dark:bg-brand-400 dark:hover:bg-brand-300 dark:active:bg-brand-200 rounded-xl px-5 py-3 text-base font-medium text-white transition duration-200 dark:text-white">
Right-End
</button>
}
content={
<p className="dark:text-white">
This is a very beautiful tooltip, show some love.
</p>
}
placement="right-end"
/>
</div>
<div className="mb-3 flex gap-3">
<Tooltip
trigger={
<button className="bg-brand-500 hover:bg-brand-600 active:bg-brand-700 dark:bg-brand-400 dark:hover:bg-brand-300 dark:active:bg-brand-200 rounded-xl px-5 py-3 text-base font-medium text-white transition duration-200 dark:text-white">
Left
</button>
}
content={
<p className="dark:text-white">
This is a very beautiful tooltip, show some love.
</p>
}
placement="left"
/>
<Tooltip
trigger={
<button className="bg-brand-500 hover:bg-brand-600 active:bg-brand-700 dark:bg-brand-400 dark:hover:bg-brand-300 dark:active:bg-brand-200 rounded-xl px-5 py-3 text-base font-medium text-white transition duration-200 dark:text-white">
Left-Start
</button>
}
content={
<p className="dark:text-white">
This is a very beautiful tooltip, show some love.
</p>
}
placement="left-start"
/>
<Tooltip
trigger={
<button className="bg-brand-500 hover:bg-brand-600 active:bg-brand-700 dark:bg-brand-400 dark:hover:bg-brand-300 dark:active:bg-brand-200 rounded-xl px-5 py-3 text-base font-medium text-white transition duration-200 dark:text-white">
Left-End
</button>
}
content={
<p className="dark:text-white">
This is a very beautiful tooltip, show some love.
</p>
}
placement="left-end"
/>
</div>
<div className="mb-3 flex gap-3">
<Tooltip
trigger={
<button className="bg-brand-500 hover:bg-brand-600 active:bg-brand-700 dark:bg-brand-400 dark:hover:bg-brand-300 dark:active:bg-brand-200 rounded-xl px-5 py-3 text-base font-medium text-white transition duration-200 dark:text-white">
Top
</button>
}
content={
<p className="dark:text-white">
This is a very beautiful tooltip, show some love.
</p>
}
placement="top"
/>
<Tooltip
trigger={
<button className="bg-brand-500 hover:bg-brand-600 active:bg-brand-700 dark:bg-brand-400 dark:hover:bg-brand-300 dark:active:bg-brand-200 rounded-xl px-5 py-3 text-base font-medium text-white transition duration-200 dark:text-white">
Top-Start
</button>
}
content={
<p className="dark:text-white">
This is a very beautiful tooltip, show some love.
</p>
}
placement="top-start"
/>
<Tooltip
trigger={
<button className="bg-brand-500 hover:bg-brand-600 active:bg-brand-700 dark:bg-brand-400 dark:hover:bg-brand-300 dark:active:bg-brand-200 rounded-xl px-5 py-3 text-base font-medium text-white transition duration-200 dark:text-white">
Top-End
</button>
}
content={
<p className="dark:text-white">
This is a very beautiful tooltip, show some love.
</p>
}
placement="top-end"
/>
</div>
<div className="mb-3 flex gap-3">
<Tooltip
trigger={
<button className="bg-brand-500 hover:bg-brand-600 active:bg-brand-700 dark:bg-brand-400 dark:hover:bg-brand-300 dark:active:bg-brand-200 rounded-xl px-5 py-3 text-base font-medium text-white transition duration-200 dark:text-white">
Bottom
</button>
}
content={
<p className="dark:text-white">
This is a very beautiful tooltip, show some love.
</p>
}
placement="bottom"
/>
<Tooltip
trigger={
<button className="bg-brand-500 hover:bg-brand-600 active:bg-brand-700 dark:bg-brand-400 dark:hover:bg-brand-300 dark:active:bg-brand-200 rounded-xl px-5 py-3 text-base font-medium text-white transition duration-200 dark:text-white">
Bottom-Start
</button>
}
content={
<p className="dark:text-white">
This is a very beautiful tooltip, show some love.
</p>
}
placement="bottom-start"
/>
<Tooltip
trigger={
<button className="bg-brand-500 hover:bg-brand-600 active:bg-brand-700 dark:bg-brand-400 dark:hover:bg-brand-300 dark:active:bg-brand-200 rounded-xl px-5 py-3 text-base font-medium text-white transition duration-200 dark:text-white">
Bottom
</button>
}
content={
<p className="dark:text-white">
This is a very beautiful tooltip, show some love.
</p>
}
placement="bottom-end"
/>
</div>
</Fragment>