Question

I’m using simple jcarousel here is ther code: http://jsfiddle.net/w6fLA/

I’m trying to show div box with txt when hover “li” but overflow hidden hides the element how can I show box top of everything?

here is my js:

$('.jcarousel-skin-tango li').hover(
    function(){
        $(this).append($("<div class='box'><p>" + $(this).find('img').attr('alt') + "</p></div>").hide().fadeIn(300));
    },

    function(){
        $('.box').fadeOut(300, function() { $(this).remove();});
    }
);

Answer 1

This still needs some finessing, but instead of appending the tooltip to the inner element, apply it to the body instead. Then position it using the offset top and left properties of the image jQuery object. I changed some of the CSS too.

http://jsfiddle.net/w6fLA/1/

$('.jcarousel-skin-tango li').hover(
    function(){
        var $img = $(this).find('img');
        $('body')
            .append($("<div class='box'><p>" + $img
            .attr('alt') + "</p></div>")
            .hide()
            .fadeIn(300)
            .css('top', $img.offset().top + 60)
            .css('left', $img.offset().left + 30));
    },

    function(){
        $('.box').fadeOut(300, function() { $(this).remove();});
    }
);
​