Tooltip display style

Question

I don’t know why the tooltip window ( .show_tooltip class) remains when the mouse is entered on li a , I want to display each tooltip up the same link as on it, and if the width and height were more or less this is the same style. (I want the links to fit correctly) DEMO

I want an example this (for how ): what am I doing?

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

Answer 1

Try the following: http://jsfiddle.net/keepyourweb/ecR2S/2/