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; } ``` ```

test1
test2
test3
test4
test5

```

Accepted Answer

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.

Aligning div right next to the list items

Solution

Problem