Come posso visualizzare un messaggio di suggerimento al passaggio del mouse utilizzando jQuery?

86

Come afferma il titolo, come posso visualizzare un messaggio di suggerimento al passaggio del mouse utilizzando jQuery?

jquery

1

A meno che non si tratti di un elemento generato dinamicamente o di un suggerimento il cui contenuto potrebbe cambiare, suggerirei di utilizzare l' title="My tooltipattributo con l'elemento stesso

— Sudipta Chatterjee

Fare riferimento Ho testato il lavoro impeccabile: stackoverflow.com/questions/11781665/...

— Daniel Adenew

25

Suggerisco qTip .

— andreialecu
fonte

36

qTip è molto pesante (55kb, più di alcuni interi framework JS). Vedi la risposta di psychotik sull'uso dell'attributo HTML. Ma se desideri qualcosa di leggero e carino, dai un'occhiata a questo plugin JQuery chiamato PowerTip, solo 12kb e compatibile anche con i vecchi browser - stevenbenner.github.com/jquery-powertip

— sdailey

190

Il plugin Tooltip potrebbe essere troppo pesante per quello che ti serve. Imposta semplicemente l'attributo "titolo" con il testo che desideri mostrare nel suggerimento.

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

— psychotik
fonte

11

Tieni presente che puoi anche inserire la tua descrizione comando nell'attributo direttamente nell'HTML: <div id = "DivWithTooltip" class = "DivClass" title = "Il tuo messaggio hover">

— Mark Brittingham

3

Questo non ha funzionato per me in IE! Ho dovuto usare propinvece. $("#yourElement").prop('title', 'This is the hover-over text');

— Snag

Ciao @psychotik. È possibile mettere in grassetto questo titolo?

— krish___na

16

Di seguito funzionerà come un fascino (supponendo che tu abbia 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');
    });

In omaggio, .css('cursor','pointer')cambierà il puntatore del mouse al passaggio del mouse.

— essere_etere
fonte

2

come aggiungere stile al tooltip

— apparso

11

dai un'occhiata al plugin jQuery Tooltip . È possibile passare un oggetto opzioni per diverse opzioni.

Sono disponibili anche altri plugin alternativi per i tooltip, di cui alcuni lo sono

Dai un'occhiata alle demo e alla documentazione e aggiorna la tua domanda se hai domande specifiche su come usarle nel tuo codice.

— Russ Cam
fonte

5

Puoi usare il tooltip di bootstrap . Non dimenticare di inizializzarlo.

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

Verrà mostrato il testo Spiegazione sul lato sinistro.

ed eseguilo con js:

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

— Nero
fonte

4

Poiché qTip consigliato e altri progetti sono piuttosto vecchi, consiglio di utilizzare qTip2 poiché è il più aggiornato.

— berni
fonte

2

Dai un'occhiata a ToolTipster

facile da usare
flessibile
piuttosto leggero, rispetto ad altri plugin di tooltip (39kB)
sembra migliore, senza uno stile aggiuntivo
ha un buon set di temi predefiniti

— pixparker
fonte

0

Puoi farlo usando solo css senza usare 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
fonte

Questa risposta non mira a rispondere alla domanda.

— Devin Fields