ToolTip

const ToolTip = ({ children }) => {
  return (
    <div className="absolute left-2.5 top-0 group transition-all z-50 h-full flex items-center">
      <div className="relative">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          strokeWidth={1.5}
          stroke="currentColor"
          className="w-6 h-6"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"
          />
        </svg>
        <span className="absolute z-50 top-1/2 -translate-y-1/2 left-8 scale-0 transition-all rounded bg-gray-800 p-2 text-xs text-white group-hover:scale-100 w-full min-w-[250px] max-w-[300px] after:content-[''] after:absolute after:left-[-15px] after:top-1/2 after:-translate-y-1/2 after:border-8 after:border-x-transparent after:border-b-transparent after:border-t-gray-800 after:rotate-[90deg]">
          {children}
        </span>
      </div>
    </div>
  );
};