On mouse hover show a div like jQuery Tooltip

Question

Let consider fallowing scenario

 <p>jhony</p>
 <p>ram</p>
 <p>lilly</p>

 <div id="about"></div>

 <script>
      $(function() {
          $('p').hover(function() { 
             $('#about').show(); 
               }, function() { 
                   $('#about').hide(); 
        });
     });

Know on mouse hover on the p tag a div will showed,But it is taking always a fixed/absolute position,But I want to show it with respect to hovering element.

Example:

If I place mouse on 'jhony' then about div should be shown left to it, If I place mouse on 'ram' then about div should be shown left to it, If I place mouse on 'lilly' then about div should be shown left to it.

Finally it should work like jQuery Tooltip.

Answer 1

Why u use jQuery for it? U can use only css

p:hover span{display : block}

or if you want use jQuery/js you must calculate height from top of window to your p and set it for your div: $(function() { $('p').hover(function() { $('#about').css('top',this.offset().top )}