2 Stimmen

Nicht funktionierende echte Tooltip-Box in jQuery

Ich weiß nicht, warum die Tooltip-Box (Klasse .show_tooltip ) wird auf der linken Seite angezeigt, wenn die Maus auf li a . Ich möchte jedes Tooltip-Feld über demselben Link anzeigen, in dem sich die Maus befindet, d. h. direkt über/links vom Link. Links müssen auf der rechten Seite sein, so wie sie jetzt sind, also bitte nicht meine html-Code ändern) DEMO

Beispiel: Mouseover auf "wie": Was kann ich tun, um es so zu machen?

enter image description here

Diese Codes sind ein kleiner Ausschnitt aus meinem ursprünglichen Code, der ziemlich lang ist.

CSS:

.show_tooltip{
    background-color: #E5F4FE;
    display: none;
    padding: 5px 10px;
    border: #5A5959 1px solid;
    position: absolute;
    z-index: 9999;
    color: #0C0C0C;
    /*margin: 0 0 0 0;
    top: 0;
    bottom: 0;*/
}

HTML:

<ul>
    <li>    
    <div class="show_tooltip">
        put returns between paragraphs
    </div>
        <a href="#">about</a>
    </li>

    <li>    
    <div class="show_tooltip">
        for linebreak add 2 spaces at end
    </div>
        <a href="#">how</a>
    </li>
</ul>

jQuery:

$("li a").mouseenter(function(){
     $(this).prev().fadeIn();
}).mousemove(function(e) {
            $('.tooltip').css('bottom', e.pageY - 10);
            $('.tooltip').css('right', e.pageX + 10);
        }).mouseout(function(){
     $(this).prev().fadeOut();
})

0voto

diEcho Punkte 51956

Ist, dass Sie --> DEMO

ändern position: fixed; en .show_tooltip{}

0voto

Abhinav Pandey Punkte 499

Erstens machen Sie das Markup auf diese Weise kompliziert, aber da Sie gesagt haben, dass Sie das HTML nicht ändern wollen, können Sie den Tooltip direkt neben dem Link platzieren.

Arbeits-Demo -> http://jsfiddle.net/bikerabhinav/AQh6y/8/

Erläuterung: Ermittelt die Breite des übergeordneten Containers (der als Achse/Basis dient)

    var t = $('ul').outerWidth();

Ermitteln des Links-Offsets von link :

var l = $(this).offset();

Wenden Sie diese auf das CSS von tooltip an. Positionieren Sie es absolut:

$("li a").mouseenter(function(){
    var l = $(this).offset();
    var t = $('ul').outerWidth();
$(this).prev().css({right:t+20-l.left,top:l.top}).fadeIn();
}).mousemove(function(e) {
        $('.tooltip').css('bottom', e.pageY - 10);
        $('.tooltip').css('right', e.pageX + 10);
     }).mouseout(function(){
     $(this).prev().fadeOut();
});

PS: Dies ist im Grunde eher ein Hack, aber ich hoffe, Sie verstehen, was ich hier zu tun versuche. Ein viel besserer Weg wäre, wenn Sie das HTML bereinigen würden

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X