Como posso exibir uma mensagem de dica de ferramenta ao passar o mouse usando jQuery?

Como o título indica, como posso exibir uma mensagem de dica de ferramenta ao passar o mouse usando jQuery?

Eu sugiro qTip .

O plugin de dica de ferramenta pode ser muito pesado para o que você precisa. Basta definir o atributo 'título' com o texto que deseja mostrar na dica de ferramenta.

$("#yourElement").attr('title', 'This is the hover-over text');

Seguir funcionará perfeitamente (supondo que você tenha 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')mudará o ponteiro do mouse ao pairar.

dê uma olhada no plugin jQuery Tooltip . Você pode passar um objeto de opções para opções diferentes.

Existem também outros plug-ins de dicas alternativos disponíveis, dos quais alguns são

• Dica de ferramenta jQuery AJAX de Random.Next ()

• dhtml goodies dica de ferramenta AJAX

• clueTip

Dê uma olhada nas demonstrações e na documentação e atualize sua pergunta se tiver perguntas específicas sobre como usá-los em seu código.

Você pode usar a dica de ferramenta de inicialização . Não se esqueça de inicializá-lo.

<span class="tooltip-r" data-toggle="tooltip" data-placement="left" title="Explanation">
inside span
</span>

Será mostrado o texto Explicação no lado esquerdo.

e execute-o com js:

$('.tooltip-r').tooltip();

Como o qTip recomendado e outros projetos são bastante antigos, recomendo o uso do qTip2, pois ele está mais atualizado.

Dê uma olhada no ToolTipster

• fácil de usar
• flexível
• muito leve, em comparação com alguns outros plug-ins de dicas (39kB)
• parece melhor, sem estilo adicional
• tem um bom conjunto de temas predefinidos

Você pode fazer isso usando apenas css sem usar nenhum jQiuery.

<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>