Tooltip

Sobreposição

Dica curta ao passar o mouse ou focar. Não coloque informação que só existe ali.

Substitui no Brain:partners tooltipui tooltip

Dica

import { Button, Tooltip } from "@paytime/ui";

export default function Example() {
  return (
    <div className="flex gap-3">
      <Tooltip content="Vence em 3 dias">
        <Button tone="neutral" variant="soft">Prazo</Button>
      </Tooltip>
      <Tooltip content="Ligado a 4 processos" side="right">
        <Button tone="neutral" variant="soft">Dependências</Button>
      </Tooltip>
    </div>
  );
}

Em botão, em ícone e em badge

MDR

import { Badge, Button, IconButton, Tooltip } from "@paytime/ui";
import { Info } from "lucide-react";

export default function Example() {
  return (
    <div className="flex flex-wrap items-center gap-6">
      <Tooltip content="Dica contextual">
        <Button tone="neutral" variant="outline" size="sm">
          Passe o mouse
        </Button>
      </Tooltip>
      <Tooltip content="Valor líquido após taxas">
        <IconButton size="sm" icon={<Info />} label="O que é valor líquido" />
      </Tooltip>
      <Tooltip content="Merchant Discount Rate">
        {/* A badge is not focusable; tabIndex makes the tip reachable by keyboard. */}
        <span tabIndex={0} className="inline-flex rounded-xs focus-visible:shadow-focus focus-visible:outline-none">
          <Badge tone="info">MDR</Badge>
        </span>
      </Tooltip>
    </div>
  );
}