jQuery UI Tooltip si muove fuori genitore div

Question

Ho un tooltip jQuery come indicato nella seguente link:

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

Con Jquery come segue:

Ora quando passo il mouse su "figlio" non voglio che il tooltip si sposti al di fuori del genitore, il tooltip dovrebbe essere confinato all'interno del "genitore" dinamicamente.

Answer 1

Utilizzare l'opzione position nell'API di jQueryUI Tooltip. L'opzione position utilizza jQuery UI Position quindi assicurati di esaminarla.

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

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

Spero che questo aiuti e fatemi sapere se avete altre domande.

Answer 2

provare questo

jsfiddle

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