Locaweb Style

Documentação

Saiba todas as features que te ajudarão a produzir sistemas mais rapidamente.

Tooltip

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.