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