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 | @oficinadanet Programação

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.

Como criar um tooltip em jQuery e CSS


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</span></a>


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.

Mais sobre: tooltip, jquery, css
Share Tweet
DESTAQUESMais compartilhados
Comentários