How can I get a div to appear next to the element the mouse is hovering on top of? (jQuery)

I have a bunch of images wrapped in links such as these:

<a class="tipsFeatured" href="#" rel="products/p0.html"><img src="assets/img/products-shoppingview-and-registryview/horne/resized/pott-5pc-setting-pott.jpg" alt="Silver Cutlery" width="170" height="170" /></a>
            <a class="tipsFeatured" href="#" rel="products/p1.html"><img src="assets/img/products-shoppingview-and-registryview/horne/resized/Design-House-Stockholm-Cobalt_Pitcher.jpg" alt="Design House Stockholm Cobalt Pitcher" width="170" height="170" /></a>

I have a div with id #descText and I'd like that when the mouse is hovered over each of this links that div appears right next to the current element with different text each time. The "different text each time" part I know how to do, but I haven't been able to make the div appear next to the current hovered element I just have:

$('.tipsFeatured').bind('mouseover',function(){
        var $txt = $('#descText');
        $(this).next().append($txt.css('display','block'));
    });

Solution

This should do it for you :

$('.tipsFeatured').hover(
    function(){
        var element = $(this).children(),
            text    = element.attr('data');

    $(this).append('<div id="descText">'+text+'</div>');

    },
    function(){

    $('#descText').remove();

    }
);

Demo : http://jsfiddle.net/hx8Tv/2/

Replace <span> with you images.

A little extra.