Como posso mostrar uma mensagem de dicas em hover usando jQuery?
Como diz o título, Como posso mostrar uma mensagem de dicas em hover usando jQuery?
8 answers
SugiroqTip .
Tooltip plugin pode ser muito pesado para o que você precisa. Basta definir o atributo 'title' com o texto que deseja mostrar na sua dica.
$("#yourElement").attr('title', 'This is the hover-over text');
Dê uma olhada no plugin jQuery Tooltip . Você pode passar em um objeto de opções para diferentes opções.
Existem também outros plugins de ferramentas alternativos disponíveis, dos quais alguns são
Olhe para as demonstrações e documentação e por favor actualize a sua pergunta se tiver informações específicas perguntas sobre como usá-las em seu código.
Seguir irá funcionar como um encanto (assumindo que você tem div/span / table / tr / td / etc com "id"="myId"
)
$("#myId").hover(function() {
$(this).css('cursor','pointer').attr('title', 'This is a hover text.');
}, function() {
$(this).css('cursor','auto');
});
Como cortesia, .css('cursor','pointer')
vai mudar o ponteiro do rato em hover.
As recommended qTip and other projects are quite old I recommended using qTip2 as it is most up-to-date.
Pode usar o ' bootstrap tooltip . Não se esqueça de inicializá-lo.
<span class="tooltip-r" data-toggle="tooltip" data-placement="left" title="Explanation">
inside span
</span>
Será mostrada explicação de texto no lado esquerdo.
E passa-o com js:
$('.tooltip-r').tooltip();
Olha para ToolTipster
- Fácil de usar
- flexível
- bastante leve, comparado com outros plugins de ferramentas (39kB)
- parece melhor, sem mais estilo
- tem um bom conjunto de temas pré-definidos
<a class="tooltips">
Hover Me
<span>My Tooltip Text</span>
</a>
<style>
a.tooltips {
position: relative;
display: inline;
}
a.tooltips span {
position: absolute;
width: 200px;
color: #FFFFFF;
background: #000000;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 6px;
}
a.tooltips span:after {
content: '';
position: absolute;
top: 100%;
left: 35%;
margin-left: -8px;
width: 0;
height: 0;
border-top: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
a:hover.tooltips span {
visibility: visible;
opacity: 0.8;
bottom: 30px;
left: 50%;
margin-left: -76px;
z-index: 999;
}
</style>