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();});
    }
);

• jquery
• jquery-plugins

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();});
    }
);
​

The way the carousel is implemented prevents you to do it by inserting the tooltip inside.

An option would be inserting the level at level as a "position:absolute", and control its position with the mouse coordinates.