Positionierung ein Tooltip relativ zu einem anderen div in JQuery

Question

Hier ist mein Tooltips Markup und CSS:

<div class="tooltip">Click here to like it</div> 

.tooltip { 
    position: absolute; 
    display: none; 
    background: url('images/tooltip.gif') no-repeat; 
    width: 100%; 
    height: 40px; 
    font-size: 0.8em; 
    line-height: 40px; 
    padding: 0px 0px 0px 8px; 
} 

Nun, ich habe einen div auf meiner Seite #button_container genannt. Ich möchte diese .tooltip div 150px über JQuery rechts von diesem div platzieren. Ich verstehe, ich muss diese Tooltips top und left Attribute festlegen, aber nicht sicher, wie.

Idealy das tooltips top Attribut soll die gleiche wie #button_container sein (obwohl nicht unbedingt #button_container positioniert ist) und 150 weniger als #button_container ‚s left Attribut.

Ich weiß nicht wirklich, wo ich anfangen soll, damit jede Hilfe sehr geschätzt wird. Vielen Dank.

Answer 1

Zunächst ein Ratschlag: rollen Sie nicht selbst auf diese. Es gibt viele ausgezeichnete jQuery Tooltip-Plugins. Benutze einfach einen von ihnen.

Abgesehen davon, wenn Sie diese Route gehen wollen, gibt es ein paar Möglichkeiten, es zu tun. Die CSS-Positionierung Route ist relativ + absolute Positionierung zu verwenden:

#button_container { position: relative; } 
div.tooltip { position: absolute; top: 20px; right: 20px; } 

Dieser Tooltip erfordert in der Schaltfläche Container sein. Es hat den Vorteil, dass sich der Tooltip mit den restlichen Seitenelementen bewegt.

Je mehr gemeinsame Lösung ist wie etwas zu verwenden:

$("#button_container").hover(function(evt) { 
    $("div.tooltip").css({top: evt.pageY + 10, left: evt.pageX + 10}).fadeIn(); 
}, function() { 
    $("div.tooltip").fadeOut(); 
}); 

Grundsätzlich Sie den Tooltip in Bezug auf die Maus, während über den relevanten Bereich zu bewegen.