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

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;

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;