CODEWITHSUNDEEP
jqueryjquery-plugins
test
test

Reputation: 2466

jQuery how show div over overflow hidden box

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

Upvotes: 2

Views: 1255

Answers (2)

mrtsherman
mrtsherman

Reputation: 39882

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

Upvotes: 1

Enrique Moreno Tent
Enrique Moreno Tent

Reputation: 25307

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.

Upvotes: 1

Related Questions