A simple React Tooltip component that uses TailwindCSS only (no libraries)

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 and text.
- 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).