Tooltip

import { Button, Icon, Tooltip } from '@bindshq/stance-react';

export function Basic() {
  return (
    <Tooltip content="Copy signature HTML">
      <Button variant="outline" size="sm" aria-label="Copy signature HTML">
        <Icon name="copy" />
      </Button>
    </Tooltip>
  );
}

import { Button, Tooltip } from '@bindshq/stance-react';

export function Placement() {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12 }}>
      {(['top', 'right', 'bottom', 'left'] as const).map((side) => (
        <Tooltip key={side} content={`Shown on the ${side}`} side={side}>
          <Button variant="secondary" size="sm">
            {side}
          </Button>
        </Tooltip>
      ))}
    </div>
  );
}

import { Button, Icon, Tooltip, TooltipProvider } from '@bindshq/stance-react';

export function SharedDelay() {
  const tools = [
    { icon: 'pencil', label: 'Edit' },
    { icon: 'copy', label: 'Duplicate' },
    { icon: 'download', label: 'Download' },
    { icon: 'trash', label: 'Delete' },
  ] as const;
  return (
    <TooltipProvider delay={400}>
      <div style={{ display: 'flex', gap: 4 }}>
        {tools.map((t) => (
          <Tooltip key={t.label} content={t.label}>
            <Button variant="ghost" size="sm" aria-label={t.label}>
              <Icon name={t.icon} />
            </Button>
          </Tooltip>
        ))}
      </div>
    </TooltipProvider>
  );
}