Wie kann ich mit jQuery eine Tooltip-Nachricht beim Hover anzeigen?

85

Wie kann ich, wie im Titel angegeben, eine Tooltip-Nachricht beim Schweben mit jQuery anzeigen?

jquery

1

Sofern es sich nicht um ein dynamisch generiertes Element oder einen Tooltip handelt, dessen Inhalt sich ändern könnte, würde ich vorschlagen, das title="My tooltipAttribut mit dem Element selbst zu verwenden

— Sudipta Chatterjee

Bitte beziehen Sie sich darauf, dass ich getestet habe, dass es einwandfrei funktioniert: stackoverflow.com/questions/11781665/…

— Daniel Adenew

26

Ich schlage qTip vor .

— andreialecu
quelle

35

qTip ist sehr schwer (55 KB, mehr als einige ganze JS-Frameworks). Siehe die Antwort von psychotik zur Verwendung des HTML-Attributs. Aber wenn Sie etwas Leichtes und Hübsches möchten, schauen Sie sich dieses JQuery-Plugin namens PowerTip an, das nur 12 KB groß ist und sogar mit alten Browsern kompatibel ist - stevenbenner.github.com/jquery-powertip

— sdailey

185

Das Tooltip-Plugin ist möglicherweise zu schwer für das, was Sie benötigen. Legen Sie einfach das Attribut 'title' mit dem Text fest, den Sie in Ihrem Tooltip anzeigen möchten.

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

— Psychotik
quelle

11

Beachten Sie, dass Sie Ihren Tooltip auch direkt im HTML-Code in das Attribut einfügen können: <div id = "DivWithTooltip" class = "DivClass" title = "Ihre Schwebemeldung">

— Mark Brittingham

3

Das hat bei mir im IE nicht funktioniert! Musste propstattdessen verwenden. $("#yourElement").prop('title', 'This is the hover-over text');

— SNag

Hallo @psychotik. Ist es möglich, diesen Titel fett zu schreiben?

— krish___na

15

Das Folgende funktioniert wie ein Zauber (vorausgesetzt, Sie haben div / span / table / tr / td / etc mit "id"="myId")

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

Als Ergänzung .css('cursor','pointer')wird der Mauszeiger beim Hover geändert.

— Sein_ätherisch
quelle

2

wie man dem angezeigten Tooltip Stil hinzufügt

— Utpal

11

Schauen Sie sich das jQuery Tooltip-Plugin an . Sie können ein Optionsobjekt für verschiedene Optionen übergeben.

Es gibt auch andere alternative Tooltip-Plugins, von denen einige sind

Schauen Sie sich die Demos und Dokumentationen an und aktualisieren Sie Ihre Frage, wenn Sie spezielle Fragen zur Verwendung in Ihrem Code haben.

— Russ Cam
quelle

4

Da empfohlenes qTip und andere Projekte ziemlich alt sind, empfehle ich die Verwendung von qTip2, da es am aktuellsten ist.

— berni
quelle

4

Sie können den Bootstrap- Tooltip verwenden . Vergessen Sie nicht, es zu initialisieren.

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

Wird angezeigt Text Erklärung auf der linken Seite.

und starte es mit js:

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

— Schwarz
quelle

2

Schauen Sie sich ToolTipster an

Einfach zu verwenden
flexibel
ziemlich leicht im Vergleich zu einigen anderen Tooltip-Plugins (39kB)
sieht besser aus, ohne zusätzliches Styling
hat eine gute Reihe von vordefinierten Themen

— pixparker
quelle

0

Sie können dies nur mit CSS tun, ohne jQiuery zu verwenden.

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

Diese Antwort zielt nicht darauf ab, die Frage zu beantworten.

— Devin Fields