Here’s a React component that allows you to attach the tooltip to any element by passing it as a child. The component will render the tooltip and an arrow pointing downward.
Tooltip
Component
import React from 'react';
const Tooltip = ({ children, text }) => {
return (
<div className="relative group inline-block">
{children}
<div className="absolute left-1/2 -translate-x-1/2 bottom-full mb-2 hidden group-hover:block w-max bg-black text-white text-xs rounded px-2 py-1">
{text}
<div className="absolute left-1/2 -translate-x-1/2 top-full h-0 w-0 border-l-4 border-r-4 border-t-4 border-l-transparent border-r-transparent border-t-black"></div>
</div>
</div>
);
};
export default Tooltip;
How to Use the Component
You can now wrap any element with the Tooltip
component to display the tooltip when hovering over that element.
Example Usage:
import React from 'react';
import Tooltip from './Tooltip';
const App = () => {
return (
<div className="p-10">
{/* Example with a button */}
<Tooltip text="This is a tooltip for a button">
<button className="px-4 py-2 bg-blue-600 text-white rounded">Hover me</button>
</Tooltip>
{/* Example with an image */}
<Tooltip text="This is a tooltip for an image">
<img src="https://via.placeholder.com/150" alt="Example" className="mt-5" />
</Tooltip>
{/* Example with text */}
<Tooltip text="This is a tooltip for text">
<p className="mt-5">Hover over this text</p>
</Tooltip>
</div>
);
};
export default App;
Explanation:
Tooltip
Component: Accepts two props,children
andtext
.children
: This is the element you want to attach the tooltip to (e.g., button, image, text, etc.).text
: This is the text that will appear inside the tooltip.
- Positioning: The tooltip will appear above the element and will be centered horizontally. It will only be visible on hover (
group-hover:block
).
Key Points:
- You can wrap any element with the
Tooltip
component. - The tooltip will work for any element since it’s designed to be generic.
You can also implement this tooltip with just HTML and CSS without React.