componentes

tooltip

Mensagem breves que complementam um elemento da página.

índice

demo interativa

Uma versão de interativa do componente desenvolvido.

propriedades*

propertydescriptionrequireddefault valuetype

content

The main content of the tooltip.

falseundefinedstring & ReactNode

side

The preferred side of the trigger to render against when open.

false'top'leftbottomrighttop

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; }

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