Tooltip
Em botão de ícone
Fechada
import { Tooltip } from '@rivocode/ui'Quando usar
Dica curta, para botão que só tem ícone.
Compõe com TooltipTrigger e TooltipContent.
Não guarde informação essencial aqui: dica não aparece no toque e não é lida em
todo contexto. O aria-label do botão continua obrigatório.
No React Native
Não porta, e não há substituto: a dica aparece ao pousar o ponteiro, e no toque não existe pousar. O que no web era um ícone com dica vira, no celular, um ícone com rótulo escrito ao lado, ou um accessibilityLabel, que resolve para o leitor de tela e não resolve para quem enxerga.
API
| Prop | Tipo |
|---|---|
actionsRef0.4.0A ref to imperative actions. | RefObject<TooltipRootActions | null> |
defaultOpen0.4.0Whether the tooltip is initially open. | boolean |
defaultTriggerId0.4.0ID of the trigger that the tooltip is associated with. | string | null |
disabled0.4.0Whether the tooltip is disabled. | boolean |
disableHoverablePopup0.4.0Whether the tooltip contents can be hovered without closing the tooltip. | boolean |
handle0.4.0A handle to associate the tooltip with a trigger. | TooltipHandle<Payload> |
onOpenChange0.4.0Event handler called when the tooltip is opened or closed. | ((open: boolean, eventDetails: TooltipRootChangeEventDetails) => void) |
onOpenChangeComplete0.4.0Event handler called after any animations complete when the tooltip is opened or closed. | ((open: boolean) => void) |
open0.4.0Whether the tooltip is currently open. | boolean |
trackCursorAxis0.4.0Determines which axis the tooltip should track the cursor on. | "both""none""x""y" |
triggerId0.4.0ID of the trigger that the tooltip is associated with. | string | null |
Partes
Tooltip se monta com estas peças. Todas vivem nesta página, porque separar cada uma num endereço obrigaria a abrir seis abas para montar uma tela.
TooltipContent
/tooltip-content.mdO balão da dica.
side diz o lado preferido, align o alinhamento no eixo dele e sideOffset a
distância até o gatilho (as mesmas três props das outras peças que flutuam, com
a mesma folga padrão de 6px). A Base UI vira sozinha quando não cabe.
Texto curto, uma dica que precisa de duas frases é uma FieldDescription no
lugar errado.
| Prop | Tipo |
|---|---|
alignAlinhamento no eixo do lado escolhido. | Align |
render0.4.0Allows you to replace the component's HTML element with a different tag, or compose it with another component. | ComponentRenderFn<HTMLProps, TooltipPopupState>ReactElement<unknown, stringJSXElementConstructor<any>> |
side0.4.0Lado preferido do gatilho. | Side |
sideOffsetDistancia entre o gatilho e o painel, em pixels. | number | OffsetFunction |
Além destas, a peça aceita className, style, id e children, repassados ao elemento de baixo.
TooltipTrigger
/tooltip-trigger.mdO que mostra a dica ao receber foco ou o ponteiro.
Envolve o elemento por render. Dica não substitui rótulo: no celular não
existe hover, e quem navega por toque nunca a vê.
| Prop | Tipo |
|---|---|
closeDelay0.4.0How long to wait before closing the tooltip. | number |
closeOnClick0.4.0Whether the tooltip should close when this trigger is clicked. | boolean |
delay0.4.0How long to wait before opening the tooltip on hover. | number |
disabled0.4.0If `true`, the tooltip will not open when interacting with this trigger. | boolean |
handle0.4.0A handle to associate the trigger with a tooltip. | TooltipHandle<Payload> |
payload0.4.0A payload to pass to the tooltip when it is opened. | Payload |
render0.4.0Allows you to replace the component's HTML element with a different tag, or compose it with another component. | ComponentRenderFn<HTMLProps, TooltipTriggerState>ReactElement<unknown, stringJSXElementConstructor<any>> |
Além destas, a peça aceita className, style, id e children, repassados ao elemento de baixo.