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

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

Ich schlage qTip vor .

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

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.

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

• Der jQuery AJAX-Tooltip von Random.Next ()

• Dhtml Goodies AJAX Tooltip

• Hinweis

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

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

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

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

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>