useHover

"use client";
import { useHover } from "@/hooks/use-hover";
import { Button } from "@/ui/button";

export function UseHoverDemo({ touch }: { touch?: boolean }) {
  const { ref, hovered } = useHover<HTMLButtonElement>(undefined, { touch });

  return (
    <>
      <Button ref={ref} className="w-24 px-0">
        {hovered ? "Yey..." : touch ? "Touch me" : "Hover me"}
      </Button>

      {hovered && (
        <div role="tooltip" className="absolute top-[calc(50%+20px)] rounded-md border bg-background p-4 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-100 data-[state=open]:zoom-in-100">
          {touch ? "You can also use touch" : "onTouch can't be used"}
        </div>
      )}
    </>
  );
}