jQuery UI Tooltip porusza się z macierzystej div

Question

Mam tooltip jQuery, jak podano w poniższym linku:

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

Z Jquery w następujący sposób:

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

Teraz, gdy umieszczam kursor nad "dzieckiem", nie chcę, aby podpowiedź była przenoszona poza obiekt nadrzędny, tzn. Etykieta narzędzia powinna być umieszczona dynamicznie w obrębie elementu nadrzędnego.

Answer 1

Użyj opcji position w interfejsie API jQueryUI Tooltip. Opcja position używa jQuery UI Position, więc spójrz na to.

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

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

Nadzieja to pomaga i daj mi znać, jeśli masz jakiekolwiek inne pytania.

Answer 2

spróbować

jsfiddle

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