jQuery wie Show div über Überlauf versteckte Box

Question

Ich verwende einfach jcarousel hier ist ther Code: http://jsfiddle.net/w6fLA/

Ich versuche, div-Box mit txt zu zeigen, wenn schweben „li“ aber Überlauf versteckt das Element verbirgt kann, wie Ich zeige Box Top von allem?

hier ist mein 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

Dies erfordert immer noch etwas Feingefühl, aber anstatt den Tooltip an das innere Element anzuhängen, wenden Sie ihn stattdessen auf den Körper an. Positionieren Sie sie dann mithilfe der oberen und linken Eigenschaften des image jQuery-Objekts offset. Ich habe auch etwas CSS geändert.

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

Answer 2

Die Art und Weise das Karussell implementiert wird man es tun verhindert durch den Tooltip innen einlegen.

Eine Option wäre das Einfügen der Ebene auf Ebene als "Position: absolut", und seine Position mit den Mauskoordinaten zu steuern.