Feedback
Tooltip
Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Tooltip
Leia até o fim para confirmar.
Variantes, tamanhos e estados
Cada célula é o componente real, marcada com a variante do Figma que reproduz (passe o mouse pra ver o node).
Side · Top
| Width | Tooltip |
|---|---|
| Auto | Leia até o fim para confirmar. |
| 240 | Leia até o fim para confirmar. A Marlene recebe uma cópia do que você aceitou. |
| 320 | Leia até o fim para confirmar. A Marlene recebe uma cópia do que você aceitou. |
Side · Bottom
| Width | Tooltip |
|---|---|
| Auto | Leia até o fim para confirmar. |
| 240 | Leia até o fim para confirmar. A Marlene recebe uma cópia do que você aceitou. |
| 320 | Leia até o fim para confirmar. A Marlene recebe uma cópia do que você aceitou. |
Props
As props que o arquivo do DS declara. O componente também repassa as do primitivo (base-ui), quando ele tem um.
TooltipRootProps
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| open? | boolean | — | Shown (controlled). |
| defaultOpen? | boolean | false | Initial state when uncontrolled. |
| onOpenChange? | ((open: boolean) => void) | — | Called when hover, focus or Escape opens or closes it. |
TooltipContentProps
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| side? | TooltipSide | "top" | Figma Side: above or below the trigger. |
| width? | TooltipWidth | "auto" | Figma Width: hug (Auto) or a fixed 240 / 320 body. |
| className? | string | — | |
| children? | ReactNode | — |
TooltipPreviewProps
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| side? | TooltipSide | "top" | |
| width? | TooltipWidth | "auto" | |
| className? | string | — | |
| children? | ReactNode | — |