Como criar um tooltip em jQuery e CSS

Há um monte de plugins tooltip lá fora, mas muitos deles não explicar o que exatamente se passa na lógica de uma dica. Gostaria de compartilhar como eu criei o meu hoje, e também estou aberto a qualquer críticas e sugestões para aqueles ninjas jQuery lá fora. Vamos dar uma olhada.

Por Programação Pular para comentários
Como criar um tooltip em jQuery e CSS

Simples Tooltip com jQuery e CSS

Há um monte de plugins tooltip lá fora, mas muitos deles não explicar o que exatamente se passa na lógica de uma dica. Gostaria de compartilhar como eu criei o meu hoje, e também estou aberto a qualquer críticas e sugestões para aqueles ninjas jQuery lá fora. Vamos dar uma olhada.

http://www.oficinadanet.com.br//imagens/coluna/3279/preview2.jpg


O HTML


Eu queria manter a marcação o mais simples possível, mas ao mesmo tempo flexível o suficiente para acomodar vários cenários que você encontrar pela frente. O principal elo terá o nome da classe de " tip_trigger "para iniciar a dica, e uma classe de" tip "para manter o conteúdo tooltip dentro.

Your Link Key Word This will show up in the tooltip


O CSS


O estilo é incrivelmente simples, e eu gostaria de encorajá-lo a obter criativo com isso para seus próprios projetos. A dica está oculta por padrão, então desencadeada por jQuery para mostrá-lo em foco. Nós lhe damos uma posição absoluta e um z-index de 1000 para ter certeza que fica na camada superior de seus elementos.

.tip {
    color: #fff;
    background:#1d1d1d;
    display:none; /*--Hides by default--*/
    padding:10px;
    position:absolute;    z-index:1000;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}


O jQuery


Para aqueles que não estão familiarizados com jQuery , fazer check-out o seu primeiro site e obter uma visão geral de como ele funciona. Eu compartilhei um alguns truques que eu acumulei ao longo do caminho, você pode verificar os para fora também.

Etapa inicial - Chame o arquivo jQuery
Você pode optar por baixar o arquivo do site do jQuery, ou você pode usar esta hospedado no Google.


Logo após a linha onde você ligou o seu jQuery, iniciar uma nova tag < script > e iniciar o seu código usando o $(document).ready event. Isso permite que seu código jQuery para executar o instante em que o DOM está pronto para ser manipulado.
$(document).ready(function() {
    //Tooltips
    $(".tip_trigger").hover(function(){
        tip = $(this).find('.tip');
        tip.show(); //Show tooltip
    }, function() {
        tip.hide(); //Hide tooltip
    }).mousemove(function(e) {
        var mousex = e.pageX + 20; //Get X coodrinates
        var mousey = e.pageY + 20; //Get Y coordinates
        var tipWidth = tip.width(); //Find width of tooltip
        var tipHeight = tip.height(); //Find height of tooltip

        //Distance of element from the right edge of viewport
        var tipVisX = $(window).width() - (mousex + tipWidth);
        //Distance of element from the bottom of viewport
        var tipVisY = $(window).height() - (mousey + tipHeight);

        if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
            mousex = e.pageX - tipWidth - 20;
        } if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
            mousey = e.pageY - tipHeight - 20;
        }
        //Absolute position the tooltip according to mouse position
        tip.css({  top: mousey, left: mousex });
    });
});


O Logic
  • Local do cache de .tip selector Conjunto de variáveis tip e cache a localização de $(this).find('.tip') Esta localização em cache irá evitar travessias múltiplas dom.
  • Hover em e Hover Out Quando pairando sobre o gatilho, mostrar a .tip ,
  • em foco a esconder a .tip
  • Mouse sobre Quando o mouse entra o gatilho, começar a controlar as coordenadas X e Y do mouse usando o e.pageX e e.pageY . Nota somarmos 20px para dar-lhe algum espaço para respirar a partir do ponteiro para a dica.
  • Variáveis conjunto Também levamos em consideração para o caso quando o tooltip excede as coordenadas X e Y do viewport. Quando isso acontece, queremos inverter a posição da dica para o outro lado. Para obter os valores desta nova posição invertida, temos de chegar a altura ea largura do nosso tooltip ( tipWidth e tipHeight ). Para detectar quando o tooltip excedeu o viewport, devemos subtrair o X e Y coordenadas (as coordenadas são adicionados com a largura e altura da tooltip) de largura viewport e altura.
  • Se Tooltip Excede Ver Horizontal Se a dica excede a visão horizontal do viewport, jogarmos a dica para o lado esquerdo do mouse. Nós calculamos isso subtraindo a largura tooltip pela coordenada X do mouse.
  • Se Tooltip Excede Ver Vertical Se a dica excede a visão vertical do viewport, jogarmos a dica para a parte superior do mouse. Nós calculamos isso subtraindo a altura tooltip pela coordenada Y do mouse.
  • Por padrão ... Se a dica não ultrapasse o ponto de vista vertical / horizontal do visor (padrão), que a posição do tooltip no canto inferior direito do mouse. CSS é injetado para ajustar o posicionamento da esquerda e de cima para seguir o mouse.


Observações sobre coisas do codigo:
Você vai ver que existem dois eventos que estão sendo acorrentado nesta função. O .hover() e .mouseover() , dê uma olhada na documentação para ambos se você não estiver familiarizado com as diferenças. Você também vai notar a declaração se então mais de tipVisX < 20 e tipVisY < 20 . O 20px é usado para levar em consideração o preenchimento de 10px (top + baixo / esquerda + direita) no tooltip.

simples_tooltip_e_jquery_e_css.rar

Compartilhe com seus amigos:
Comentários:
Carregar comentários