componentes

tooltip

Mensagem breves que complementam um elemento da página.

demo interativa

Uma versão de interativa do componente desenvolvido.

propriedades*

propertydescriptionrequireddefault valuetype

content

The main content of the tooltip.

trueundefinedReactNode

extraContent

An extra content to be displayed in the right side of the tooltip.

falseundefinedReactNode

inverted

Change tooltip color to a lighter version.

falsefalseboolean

image

Add an image to the tooltip. The image will be displayed on the left side of the tooltip.

falseundefined{ src: string; alt: string; }

side

The preferred side of the trigger to render against when open. Union kept inline (not imported from usePosition) so react-docgen-typescript can resolve it as a literal list for the interactive doc demo.

falsetoptoprightbottomleft

forceOpen

Override the automatic control of the open state.

falseundefinedboolean

*valores gerados automaticamente.

formatação

Botão de ícone e tooltip com seta apontando para o botão. Botão tem destaque de número 1 e a tooltip tem destaque de número 2.
  1. Tooltip trigger: componente que aciona a tooltip.
  2. Tooltip: mensagem relacionada ao trigger.

uso

A tooltip é utilizada para fornecer informação complementar a um determinado elemento da tela. Ela é altamente contextual e acionada por uma ação da pessoa usuária na tela, seja por mouse hover, quanto por keyboard hover.

variaçãoutilização
imagemPode ser usada para fazer pré-visualização de produtos ou usuários.
texto complementarPara mostrar informação complementar, como hora ou atalhos.
versão invertidaA versão invertida é para ser usada principalmente quando a tooltip estiver presente em fundos coloridos, aumentando o destaque.

grupos e alinhamento

  • A tooltip fica alinhada ao objeto ao qual se refere, utilizando o espaçamento $spacing-inline 3xsmall ou $spacing-stack-2xsmall.
  • Evite posicionar a tooltip de modo que esconda o conteúdo relacionado.
Ilustração de página web com um campo de texto e um ícone de informação à direita. A tooltip é aberta abaixo do ícone, sobrepondo o campo de texto.
certoPosicione a tooltip fora do conteúdo relacionado a ela.
Ilustração de página web com um campo de texto e um ícone de informação à direita. A tooltip é aberta abaixo do ícone, sobrepondo o campo de texto.
erradoNão posicione a tooltip sobre o conteúdo relacionado.

guia de conteúdo

  • A tooltip comporta somente microconteúdo.
  • Deve conter informação complementar ao fluxo.
  • A tooltip possui conteúdo altamente contextual.
Ilustração de página web com campo para digitação de senha. Ícone de informação ao lado do campo, com uma tooltip aberta escrito: A senha deve conter no mínimo 1 caracter especial, 1 número, 8 caracteres totais.
certoApresente somente informação curta e complementar ao elemento.
Ilustração de página web com um campo de texto e um ícone de informação à direita. A tooltip é aberta abaixo do ícone, sobrepondo o campo de texto.
erradoNão posicione a tooltip sobre o conteúdo relacionado.

guia de design

  • Tem guia de uso.
  • Tem guia de conteúdo.
  • Use os design tokens.
  • Tem símbolo no Figma.
  • Possui motion.
  • Possui versão web.
  • Possui versão responsiva.
  • Possui versão mobile.
  • É acessível via leitor de tela.
  • Texto possui contraste acessível (WCAG 2.0 - Nível AA).

conteúdo relacionado

Propriedades

UnitedOlist Design System
contentcontent
delay❌
icon❌
placementside
size❌
variationinverted
zIndex❌
❌extraContent
❌image
❌forceOpen

Variações Existentes

UnitedOlist Design System
primary❌
error❌
info❌
default❌
secondary❌
success❌
warning❌
❌inverted