Tooltip

O componente tooltip serve para dar informações opcionais à pessoa usuária de forma simples e clara. Diferentemente do title, o tooltip é mais dinâmico, rápido e estilizado, mas seus propósitos são similares. Não se deve usar o tooltip sempre tampouco com informações complexas.

Playground

Propriedades

Nome (* = obrigatório)

Tipo

Valores

Descrição

children *

JSX.Element

O elemento ao qual o Tooltip fará referência.

Há uma limitação em que esse nó não deve ser um elemento SVG, pois o posicionamento do tooltip não funcionará adequadamente. De toda forma, o direcionamento é que um elemento SVG não seja utilizado sozinho para Tooltips, mas sim envolto de um ActionButton para garantir a acessibilidade da interação (área de clique adequada e estilo de hover/focus).

title *

string

Conteúdo interno.

placement

TooltipPlacement

  • auto (default)

  • top

  • right

  • bottom

  • left

O local do Tooltip relativo ao seu conteúdo (children).

offset

SpacingToken

  • base

  • base02 (default)

  • base03

  • base04

  • base05

  • base06

  • base07

  • base08

  • base10

  • base12

  • base15

A distância entre o tooltip e seu conteúdo de referência.

trigger

TooltipTrigger

  • hover (default)

  • click

O evento-gatilho que faz o Tooltip aparecer.

open

boolean

  • false (default)

  • true

Se o tooltip está ou não aberto. Esse valor deve ser usado quando se deseja usar o Tooltip de forma controlada (controlled).

isAutoUpdate

boolean

  • false

  • true (default)

Adiciona listeners que chamam automaticamente uma função de atualização quando necessário para que o elemento flutuante permaneça ancorado ao elemento de referência em uma variedade de cenários sem desanexar.

isLockedFocus

boolean

  • false

  • true (default)

Se verdadeiro, significa que o foco está totalmente preso dentro do elemento flutuante e o conteúdo externo não pode ser acessado. Isso inclui cursores virtuais do leitor de tela.

customProps

{title?: TypographyProps;}

    Adiciona propriedades específicas para elementos filhos.

    asPortal

    boolean

    • false

    • true (default)

    Define se o componente será criado com um Portal, fora do nó principal da aplicação e dentro do body

    Métodos

    Nome (* = obrigatório)

    Tipo

    Descrição

    onDismiss

    function

    Função invocada quando o Tooltip é dispensado por comportamentos padrão de interação.
    Ela é invocada quando a pessoa:
    - Aperta a tecla ESC;
    - Clica em qualquer lugar da tela fora do Tooltip;
    - Realiza scroll em algum elemento ancestral ao Tooltip.