useTrigger

"use client";
import { Button } from "@/ui/button";
import { useTrigger } from "@/hooks/use-trigger";

export function UseTriggerDemo() {
  const { ref, open } = useTrigger<HTMLButtonElement>({ defaultOpen: true });

  return (
    <>
      <Button ref={ref}>Click me to {open ? "close" : "open"}</Button>

      {open && (
        <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">
          Content that is {open ? "open" : "closed"}
        </div>
      )}
    </>
  );
}