When the mouse enters on li a, the tooltip box (class .show_tooltip) is appearing on the left. I want each tooltip box to display just above or to the left of the link that the mouse is on. The links need to stay on the right as they are now, so please do not modify my html code. Check out the DEMO for an example.
For instance, when hovering over "how", I want the tooltip box to display in a similar manner.
This code is just a small part of my larger code.
CSS:
.show_tooltip{
background-color: #E5F4FE;
display: none;
padding: 5px 10px;
border: #5A5959 1px solid;
position: absolute;
z-index: 9999;
color: #0C0C0C;
}
HTML:
<ul>
<li>
<div class="show_tooltip">
Insert returns between paragraphs
</div>
<a href="#">about</a>
</li>
<li>
<div class="show_tooltip">
Add 2 spaces at the end for a line break
</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();
})