Você está usando um navegador desatualizado. Para a visualização correta, atualize seu navegador:

SimpleUi

Mapa do site

Páginas do Site

Páginas das Funções

SimpleUi
Atualizando
‹

Código para Tooltip Download

? - +
Mensagem de tooltip
  1. Coloque a classe ui_tooltip no elemento que terá um tooltip
    • Qualquer elemento pode receber tooltip, <a>, <span>, <div>, etc.
  2. 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:
  1. 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
  2. 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
  3. 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
  4. 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
  1. A mensagem do tooltip aceita html, como <b>, <i>, <strong>, <br />, <em>, <u>, etc.
  2. Para adicionar uma classe especifica a mensagem, insira em ui_tooltip o atributo data-class com o nome da classe.
  3. 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.
  4. 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));"
Customizar

Marcação e mensagem

A marcação terá a seguinte mensagem:
Dica: A mensagem aceita html, como <b>, <i>, <br />, <strong>, <em>, <u>, etc.
Ela pode ser aplicada em qualquer marcação (tag).

Largura

O tooltip terá de largura. Padrão: auto-ajustável
Ainda há o atributo data-class para informar o seletor do tooltip.

Alinhamento

Alinhar a mensagem ao(à) e . Padrão: ao centro e acima
Alinhar o texto da mensagem ao(à) . Padrão: ao centro
Restaurar padrão
Tem certeza que deseja reiniciar todos os valores?

Resultado para Tooltip