Saiba todas as features que te ajudarão a produzir sistemas mais rapidamente.
Para exibir balões de informação.
O tooltip exibe conteúdo curto, caso necessite de um conteúdo longo, por favor utilize nosso popover.
1
2
3
4
5
6
<a href="#" class="ls-tooltip-top ls-btn" aria-label="Conteúdo exibido acima">Cima</a>
<a href="#" class="ls-tooltip-right ls-btn" aria-label="Conteúdo exibido no lado direito">Direita</a>
<a href="#" class="ls-tooltip-bottom ls-btn" aria-label="Conteúdo exibido abaixo">Baixo</a>
<a href="#" class="ls-tooltip-left ls-btn" aria-label="Conteúdo exibido no lado esquerdo">Esquerda</a>
<a href="#" class="ls-tooltip-top-left ls-btn" aria-label="Conteúdo exibido no topo para a esquerda">Topo Esquerda</a>
<a href="#" class="ls-tooltip-right ls-btn" disabled aria-label="Conteúdo exibido com botão desativado">Desativado</a>
| Classe | Descrição |
|---|---|
| ls-tooltip-top | Exibe acima do elemento. |
| ls-tooltip-right | Exibe ao lado direito do elemento. |
| ls-tooltip-bottom | Exibe abaixo do elemento. |
| ls-tooltip-left | Exibe ao lado esquerdo do elemento. |
Indicamos utilizar esse elemento em links, para que ele funcione ao receber o foco do teclado.
O conteúdo do tooltip é inserido no atributo aria-label, assim ele funciona perfeitamente nos leitores de tela.