Mensagem de tooltip
- Coloque a classe ui_tooltip no elemento que terá um tooltip
- Qualquer elemento pode receber tooltip, <a>, <span>, <div>, etc.
- Nesse mesmo elemento, coloque o atributo data-tooltip onde o valor será a mensagem
Pronto! Isso é suficiente. Caso queira, você pode customizar a função:
- Use o atributo data-align para informar qual será o alinhamento horizontal da mensagem.
- Valores notáveis: center (padrão), left, right, cursor-center, cursor-left e cursor-right
- Use o atributo data-valign para informar qual será o alinhamento vertical da mensagem.
- Valores notáveis: top (padrão), bottom, cursor-top e cursor-bottom
- Use o atributo data-text-align para informar qual será o alinhamento do texto da mensagem.
- Valores notáveis: center (padrão), left e right
- A largura do tooltip é fluída, ou seja ajusta-se de acordo com o contéudo da mensagem
- Caso necessário, use o atributo data-width para determinar a largura da mensagem e informe o valor em pixels
- A mensagem do tooltip aceita html, como <b>, <i>, <strong>, <br />, <em>, <u>, etc.
- Para adicionar uma classe especifica a mensagem, insira em ui_tooltip o atributo data-class com o nome da classe.
- Por padrão, dispositivos desktop acionam o tooltip com o passar do mouse, enquanto dispositivo móveis acionam pelo clique.
- Caso necessário, use data-mobile-behavior="true" em ui_tooltip para que o desktop também seja acionado por clique.
- Usuários avançados podem alterar a mensagem em tempo de execução a partir de eventos, como no exemplo do uso de tooltip combinado com accordion:
- onclick="if($(this).hasClass(‘active‘)) $(this).attr(‘data-tooltip‘,‘Visualizar mais itens‘); else $(this).attr(‘data-tooltip‘,‘Esconder itens‘); toolTip($(this));"