Aligning div right next to the list items

Question

I am trying to create div elements and print items on to them dynamically. I've created a demo to show where I've reached.

The issue with my code is that it doesn't show up right next to the list where I want it. Instead it is displayed at the bottom. Is it possible to show the new div right next to the element that I'm hovering over?

$(".bubble").live({     mouseenter : function() {         $("#bubble").show();         $("#bubble").html($(this).attr('id'));     },     mouseleave : function() {         $("#bubble").empty();     } }); 

#bubble{     width:100px;     height:20px;     background-color:#666666;     position:absolute;     display:hidden; } 

<ul>     <li><span class="bubble" id="test1">test1</span></li>     <li><span class="bubble" id="test2">test2</span></li>     <li><span class="bubble" id="test3">test3</span></li>     <li><span class="bubble" id="test4">test4</span></li>     <li><span class="bubble" id="test5">test5</span></li> </ul> <div id="bubble"></div> 

Answer 1

You need to set the position of #bubble relative to the li which is being moused over. Try this:

$("ul").on('hover', '.bubble', function(e) {     if (e.type == 'mouseenter') {         var $el = $(this);         $("#bubble")             .html($el.attr('id'))             .css({                 top: $el.offset().top,                 left: $el.offset().left + $el.width()             })             .show();     }     else {         $("#bubble").empty();     } }); 

Example fiddle

Note that I have removed the use of live() as it has been deprecated, and used on() with a delegate instead. Also I used the hover event.

Answer 2

What about a pure CSS solution?

HTML:

<ul> <li>     <span class="bubble" id="test1">test1</span>     <div>test1</div> </li> <li>     <span class="bubble" id="test2">test2</span>     <div>test2</div> </li> <li>     <span class="bubble" id="test3">test3</span>     <div>test3</div> </li> <li>     <span class="bubble" id="test4">test4</span>     <div>test4</div> </li> <li>     <span class="bubble" id="test5">test5</span>     <div>test5</div> </li> </ul> 

CSS:

ul li div {     width: 100px;     height: 10px;     background-color: #666666;     position: absolute;       display: none; }  ul li:hover div {     display: inline;    } 

JSFiddle: http://jsfiddle.net/H2ZMc/