n3wt-school/Front-End/src/components/Tooltip.js

import React, { useState } from 'react';
import PropTypes from 'prop-types';

const Tooltip = ({ content, children }) => {
  const [visible, setVisible] = useState(false);

  return (
    <div className="relative inline-block">
      <div
        onMouseEnter={() => setVisible(true)}
        onMouseLeave={() => setVisible(false)}
        className="cursor-pointer"
      >
        {children}
      </div>
      {visible && (
        <div className="absolute z-10 w-max max-w-[min(16rem,calc(100vw-2rem))] p-2 bg-white border border-gray-200 rounded shadow-lg">
          {content}
        </div>
      )}
    </div>
  );
};

Tooltip.propTypes = {
  content: PropTypes.node.isRequired,
  children: PropTypes.node.isRequired,
};

export default Tooltip;