A Tooltip Component for React & TypeScript

import { FC, useState } from 'react';

interface TooltipProps {
  children: React.ReactNode;
  content: string;
  direction: 'top' | 'right' | 'bottom' | 'left';
}

const Tooltip: FC<TooltipProps> = ({ children, content, direction }) => {
  const [show, setShow] = useState(false);

  return (
    <div
      onMouseEnter={() => setShow(true)}
      onMouseLeave={() => setShow(false)}
      className="relative flex items-center "
    >
      {children}
      {show && (
        <div
          className={`bg-[#302d3e] text-white text-[10px] rounded py-1 px-2 absolute  ${
            direction === 'top' && 'bottom-full'
          } ${direction === 'right' && 'left-full top-1'} ${
            direction === 'bottom' && 'top-full left-full '
          } ${direction === 'left' && 'right-full'}`}
        >
          {content}
        </div>
      )}
    </div>
  );
};

export default Tooltip;