Tooltip
Tooltip são labels flutuantes não interativas usados para explicar um elemento ou recurso da interface. Podem ser acionados com hover.
Quando usar:
- O texto a ser exibido como label for conciso, com no máximo 4 palavras.
- Para exibir informações suplementares sobre uma feature ou elemento da interface.
Quando não usar:
- Para comunicar erros e status do sistema.
- Para mostrar informações críticas para a compreensão de uma feature ou elemento da interface.
Uso
js
<CdsTooltip
text="Texto do tooltip"
>
Tooltip trigger
</CdsTooltip>Preview
Tooltip trigger
Props
Nome | Tipo | Default | Opções | Descrição |
|---|---|---|---|---|
position | string | 'top' | auto auto-start auto-end top top-start top-end right right-start right-end bottom bottom-start bottom-end left left-start left-end | O posicionamento do Tooltip. A prop aceita as opções: top, right, bottom e left. |
text | string | null | -- | Texto do Tooltip |
slim | boolean | false | -- | Quando marcada como true, deixa o texto e o tamanho do tooltip menores. |
rounded | boolean | true | -- | Define o arredondamento da borda do tooltip. |
trigger | string | 'hover' | hover click | Define como o tooltip é acionado. |
Slots
Nome | Descrição |
|---|---|
#default |