Text-tooltip bei mouseover

Habe ich eine Reihe von Kugeln, und ich möchte einen tooltip, wenn ich mit der Maus über jeden von Ihnen individuell. Der tooltip-text kann die Kugeln Titel-tag, und es muss ausgegeben werden in einem tooltip-container. Neuling in javascript, so dass dies ist, wo ich die Hilfe brauche.

Hier ist mein CSS:

.container ul { width: 300px; height: 30px; display: block; background: #CCC;  }
.container li { width: 28px; height: 28px; display: block; float: left; border: 1px solid #FFF; }
.tooltip { width: auto: height: 12px; display: block; }

Mein HTML:

<div id="tooltip" class="tooltip"></div>
<div class="container">
    <ul>
        <li class="book" title="book"></li>
        <li class="movie" title="movie"></li>
        <li class="tv" title="tv"></li>
    </ul>
</div>

Und meine javascript:

<script>
$(document).ready(function(){
    $("ul li").mouseover(function() {
         $("#tooltip").text($(this).attr("title"));
    });
});
</script>
Ich würde Ihnen raten, ein plugin benutzen zu können, anstatt zu versuchen, es selbst zu tun, besonders wenn du ein Neuling. Es gibt einige sehr gute haben wir unten aufgeführt. Auch, wenn Sie in dreamweaver haben Sie ein widget namens spry-QuickInfo, die ist super einfach zu bedienen
Haben Sie Anregungen zu jquery-plugin, das Sie gesehen haben, gut funktionieren?

InformationsquelleAutor Gabriel | 2011-03-17

  1. 1

    ändern von

    $("#tooltip").text("this.val(alt)")

    zu

    $("#tooltip").text($(this).attr('alt'));

    Dank Davuth. Dehnte ich Ihren Vorschlag (siehe original), aber immer noch ohne Erfolg. Auch verschoben aus "alt" - Attribut auf "Titel".
    Davuth habe ich es geschafft es zum laufen zu bringen. Danke Mann!

    InformationsquelleAutor Davuth

  2. 1

    Diese nicht direkt auf Ihre Frage zu beantworten, aber es gibt einige nützliche jQuery-plugins, die bereits für diese Funktionalität. Das mag ich: http://craigsworks.com/projects/qtip/a

    Einige andere: http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/

    Danke Mann habe ich versucht zu installieren, aber ich denke, es ist viel zu mächtig für das, was ich Suche.

    InformationsquelleAutor ctcherry

  3. 0

    Ich würde vorschlagen, jQuery UI tooltip-Funktion.

    QuickInfo-text ist oft aus title-Attribut des Elements, auf dem Sie diese Funktion benutzen - aber vielleicht hast du es an anderer Stelle.

    Können Sie festlegen, wie die position der tooltip und auch die position des Textes innerhalb.

    $('textarea').tooltip({
        position: {
            my: 'left center',
            at: 'right center'
        }
    });

    Aber Sie können text für tooltip überall im code.

    $('select').tooltip({
position: {
        my: 'right center',
        at: 'left center'
    },
    content: function(){
        if($(this).find('option:selected').val() == 0 )
        {
            return '...';
        }
        else
        {
            return '...' + $(this).find('option:selected').val() + '...';
        }
    }
});

    wie in diesem Fall, in dem QuickInfo-text enthält, der basierend auf der ausgewählten option oder einen beliebigen anderen text.

    InformationsquelleAutor Václav

Schreibe einen Kommentar