Tooltip

export default function Component() {
  return (
    <div className="relative group">
  <p className="text-slate-800 font-mono font-bold cursor-pointer">Hover me.</p>

  <div
    className="absolute left-1/2 -translate-x-1/2 bottom-full mb-2 opacity-0 group-hover:opacity-100 transition duration-100 transform group-hover:translate-y-0 translate-y-2"
  >
    <div className="bg-slate-800 w-max max-w-xs text-white rounded-lg px-4 py-4">
      <p className="font-bold text-md mb-1">Hello there! 👋</p>
      <p className="text-sm">
        This is a tooltip message!
        <br />
        It <b>appears</b> and then <b>dissapears</b>.
        <br />
        ....
      </p>
    </div>
  </div>
</div>
  );
}