JQuery UI Tooltip bewegt sich aus Eltern div

Question

ich ein jQuery Tooltip haben, wie in den folgenden Link angegeben:

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

Mit Jquery wie folgt:

Wenn ich jetzt den Mauszeiger über 'Kind' bewege, möchte ich nicht, dass der Tooltip nach außen verschoben wird, d. H. Der Tooltip sollte dynamisch innerhalb des 'Elternteils' liegen.

Answer 1

Verwenden Sie die Option position in der jQueryUI Tooltip-API. Die Option position verwendet jQuery UI Position, also schauen Sie sich das an.

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

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

hoffe, das hilft und lassen Sie mich wissen, wenn Sie Fragen haben.

Answer 2

versuchen diese

jsfiddle

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