Tooltip on Hover?

Can we got a tool tip on hover? A chatbot gave me this, but it would be nice to have something uniform with nice formatting.

function ToolTip() {
  const [isPopupVisible, setIsPopupVisible] = useState(false);

  const handleMouseEnter = () => {
    setIsPopupVisible(true);
  };

  const handleMouseLeave = () => {
    setIsPopupVisible(false);
  };

  return (
    <div
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      style={{ position: 'relative', display: 'inline-block' }}
    >
      Hover over me
      {isPopupVisible && (
        <div
          style={{
            position: 'absolute',
            top: '100%',
            left: '0',
            backgroundColor: 'lightgray',
            padding: '10px',
            border: '1px solid black',
            zIndex: 1,
          }}
        >
          Popup content
        </div>
      )}
    </div>
  );
}

No repository files or tests are named. Start by reviewing the existing React components and hover interactions, then compare them with the proposed ToolTip example. Done should mean the project has a uniform, consistently formatted tooltip behavior and the relevant UI usage is covered.