jquery UI Tooltip di chuyển ra khỏi mẹ div

Question

Tôi có một tooltip jQuery như được đưa ra trong đường dẫn sau:

http://jsfiddle.net/ronnykroy/amYZW/2/

HTML:

<div id="parent"> 
    <div id="child" title="It has been a very long text"> 
    </div> 
</div> 

CSS:

#parent{ 
    position:absolute; 
    width: 500px; 
    height: 200px; 
    background-color:#00f; 
} 

#child{ 
    position:absolute; 
    left:400px; 
    width: 100px; 
    height:150px; 
    background-color: #f00; 
} 
.tooltipclass{ 
    width: 50px; 
    background-color: #ffffff; 
    color: #000000; 
} 

Với Jquery như sau:

$("#child").tooltip({ 
    track: true, 
    tooltipClass: "tooltipclass" 
}); 

Bây giờ khi tôi di chuột qua 'con' tôi không muốn chú giải công cụ di chuyển ra ngoài bố mẹ, tức là chú giải công cụ phải được giới hạn trong 'gốc' động.

Answer 1

Sử dụng tùy chọn position trong API của jQueryUI Tooltip. Tùy chọn position sử dụng jQuery UI Position để đảm bảo xem xét điều đó.

$("#child").tooltip({ 
    track: true, 
    tooltipClass: "tooltipclass", 
    position: { within:"#parent"} 
}); 

DEMO: http://jsfiddle.net/dirtyd77/6EZHZ/

Hope this helps và cho tôi biết nếu bạn có bất kỳ câu hỏi khác.

Answer 2

thử này

jsfiddle

$("#child").tooltip({ 
    track: true, 
    tooltipClass: "tooltipclass", 
    position: { my: "left top+15", at: "left bottom", collision: "flipfit" } 
});