¿Cómo puedo mostrar un mensaje de información sobre herramientas al pasar el mouse usando jQuery?

Como dice el título, ¿cómo puedo mostrar un mensaje de información sobre herramientas al pasar el mouse usando jQuery?

Sugiero qTip .

El complemento de información sobre herramientas puede ser demasiado pesado para lo que necesita. Simplemente configure el atributo 'título' con el texto que desea mostrar en su información sobre herramientas.

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

Lo siguiente funcionará como un encanto (asumiendo que tiene div / span / table / tr / td / etc con "id"="myId")

    $("#myId").hover(function() {
        $(this).css('cursor','pointer').attr('title', 'This is a hover text.');
    }, function() {
        $(this).css('cursor','auto');
    });

Como complemento, .css('cursor','pointer')cambiará el puntero del mouse al pasar el mouse.

eche un vistazo al complemento jQuery Tooltip . Puede pasar un objeto de opciones para diferentes opciones.

También hay otros complementos alternativos de información sobre herramientas disponibles, de los cuales algunos son

• Información sobre herramientas jQuery AJAX de Random.Next ()

• Información sobre herramientas de AJAX de dhtml goodies

• pistaTip

Consulte las demostraciones y la documentación y actualice su pregunta si tiene preguntas específicas sobre cómo usarlas en su código.

Puede utilizar la información sobre herramientas de bootstrap . No olvide inicializarlo.

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

Se mostrará el texto Explicación en el lado izquierdo.

y ejecutarlo con js:

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

Como qTip recomendado y otros proyectos son bastante antiguos, recomiendo usar qTip2 ya que está más actualizado.

Eche un vistazo a ToolTipster

• fácil de usar
• flexible
• bastante ligero, en comparación con otros complementos de información sobre herramientas (39kB)
• se ve mejor, sin estilo adicional
• tiene un buen conjunto de temas predefinidos

Puede hacerlo usando solo css sin usar ningún 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>