Tooltip Next

UsoExemplos
• API

Import

import { Tooltip } from '@resultadosdigitais/tangram-components/next'

Properties

label 📍

Concerns	📍 Required
Type	string

Description

Texto do Tooltip.

disabled

Type	bool
Default	false

Description

Indica que o Tooltip permanecerá oculto mesmo em situações onde normalmente ele seria exibido.

show

Type	bool

Description

Controla se o Tooltip estará exibido ou não.

defaultShow

Type	bool

Description

Na versão não controlada do componente, indica se o Tooltip iniciará exibido ou não.

side

Type	Enum of: 'top' 'right' 'bottom' 'left'
Default	'top'

Description

Lado onde o Tooltip preferencialmente será exibido. Caso não haja espaço disponível na viewport para o lado indicado, o Tooltip será exibido automaticamente em um dos outros lados onde haja espaço disponível.

offset

Type	number
Default	Tooltip.defaultOffset

Description

Distância (em pixels) entre o elemento que está sendo descrito (âncora) e o conteúdo do Tooltip.

width

Type	string

Description

Largura customizada para o conteúdo do Tooltip.

maxWidth

Type	string

Description

Largura máxima customizada para o conteúdo do Tooltip.

children 📍

Concerns	📍 Required
Type	node

Description

Conteúdo que será descrito. Deve conter no mínimo um componente que aceite a propriedade ref e renderize um elemento HTML.

<Tooltip label="Notificações">
  <IconButton>
    <Bell title="Notificações" />
  </IconButton>
</Tooltip>

// O segundo IconButton será renderizado normalmente,
// contudo, não será descrito pelo Tooltip que o
// envolve
<Tooltip label="Notificações">
  <IconButton>
    <Bell title="Notificações" />
  </IconButton>
  <IconButton>
    <Cog title="Configurações" />
  </IconButton>
</Tooltip>

onToggle

Type	func
Param	event React.SyntheticEvent - A origem do evento que acionou o callback.
Param	show boolean - Indica se o Tooltip pretende ser exibido (true) ou escondido (false).
Param	infos object - Informações adicionais. infos.reason string - Razão para o acionamento do callback, podendo ser (a) 'mouseover': o usuário passou o mouse por cima do elemento descrito, (b) 'focus': o usuário focou o elemento descrito, (c) 'blur': o elemento descrito perdeu o foco e (d) 'esc': o usuário pressionou ESC.

Description

Callback acionado quando o Tooltip pretende ser exibido ou escondido.

Feedback

Para reportar algum problema, solicitar novos ícones, solicitar novos casos de uso de componentes, tirar dúvidas, enviar sugestões ou reportar bugs, entre em contato pelo nosso canal no Slack #tangram-design-system.