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 ou sugerir alterações, use nosso formulário de melhorias ou, se preferir, abra uma issue no nosso Github.