Tooltip

import { Button } from '@brika/clay/components/button';
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@brika/clay/components/tooltip';
/** Control open delay with delayDuration on the provider, 0 makes it instant. */
export default function TooltipDelayDemo() {
  return (
    <div className="flex items-center gap-4">
      <TooltipProvider delayDuration={0}>
        <Tooltip>
          <TooltipTrigger asChild>
            <Button variant="outline" size="sm">
              Instant
            </Button>
          </TooltipTrigger>
          <TooltipContent>No delay</TooltipContent>
        </Tooltip>
      </TooltipProvider>
      <TooltipProvider delayDuration={700}>
        <Tooltip>
          <TooltipTrigger asChild>
            <Button variant="outline" size="sm">
              700 ms delay
            </Button>
          </TooltipTrigger>
          <TooltipContent>Opens after 700 ms</TooltipContent>
        </Tooltip>
      </TooltipProvider>
    </div>
  );
}

import { Button } from '@brika/clay/components/button';
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@brika/clay/components/tooltip';

/**
 * Disabled buttons don't fire pointer or focus events, so tooltips never
 * trigger. Use `aria-disabled` instead — the button stays focusable and
 * keyboard-reachable, the tooltip works, and the click handler guards
 * against the disabled action.
 */
export default function TooltipDisabledElementDemo() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button
            aria-disabled="true"
            className="opacity-50"
            onClick={(event) => event.preventDefault()}
          >
            Publish
          </Button>
        </TooltipTrigger>
        <TooltipContent>You need editor permissions to publish.</TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

import { Button } from '@brika/clay/components/button';
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@brika/clay/components/tooltip';
/** Side and sideOffset control where the tooltip appears relative to its trigger. */
export default function TooltipSidesDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-3">
      {(['top', 'right', 'bottom', 'left'] as const).map((side) => (
        <TooltipProvider key={side} delayDuration={0}>
          <Tooltip>
            <TooltipTrigger asChild>
              <Button variant="outline" size="sm">
                {side}
              </Button>
            </TooltipTrigger>
            <TooltipContent side={side}>Opens {side}</TooltipContent>
          </Tooltip>
        </TooltipProvider>
      ))}
    </div>
  );
}