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

85

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

jquery

1

A menos que sea un elemento generado dinámicamente o una información sobre herramientas cuyo contenido pueda cambiar, sugeriría usar el title="My tooltipatributo con el elemento en sí

— Sudipta Chatterjee

por favor refiérase a que he probado que funciona impecablemente: stackoverflow.com/questions/11781665/…

— Daniel Adenew

25

Sugiero qTip .

— andreialecu
fuente

35

qTip es muy pesado (55kb, más que algunos frameworks JS completos). Vea la respuesta de psychotik sobre el uso del atributo HTML. Pero si desea algo liviano y bonito, consulte este complemento de JQuery llamado PowerTip, solo 12kb y compatible incluso con navegadores antiguos - stevenbenner.github.com/jquery-powertip

— sdailey

no existe, abandonado

— Peter Krauss

189

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');

— psicotik
fuente

11

Tenga en cuenta que también puede colocar su información sobre herramientas en el atributo directamente en el HTML: <div id = "DivWithTooltip" class = "DivClass" title = "Your hover message">

— Mark Brittingham

3

¡Esto no funcionó para mí en IE! Tuve que usar propen su lugar. $("#yourElement").prop('title', 'This is the hover-over text');

— SNag

Hola @psychotik. ¿Es posible poner en negrita este título?

— krish___na

16

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.

— being_ethereal
fuente

2

cómo agregar estilo en la información

— Utpal

11

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

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

— Russ Cam
fuente

5

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();

— Negro
fuente

4

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

— berni
fuente

2

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

— pixparker
fuente

0

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>

— Nalan Madheswaran
fuente

Esta respuesta no tiene como objetivo responder a la pregunta.

— Devin Fields