Can JQuery UI tooltips be used with a CFLayoutArea?

Question

I am attempting to add JQuery UI tooltips into content within a CFLayout. However, in IE8 (quirks mode) the tooltip is appearing against the left margin of the browser. I believe this is some sort of incompatibility between JQuery and Ext-JS.

To test I tried creating an absolutely positioned div with a left of 200px within the <CFLayoutArea to see if it would also stick to the left of the browser, but it did not. Instead, it appeared 200px from the left side of the <CFLayoutArea whereas it should have appeared at 200px from the left side of the browser window.

Has anyone run into and resolved a similar issue? Switching out of quirks mode is not an option at this point.

UPDATE

I've managed a hack by using code like this:

open: function (event, ui) {
    updateTooltipPositions();
}



function updateTooltipPositions() {
    $("[id^='ui-tooltip-']").css("left", mouseX-401);
    $("[id^='ui-tooltip-']").css("top", mouseY+1);
}

However, it's not a clean solution, and it prevents the animation when tooltips are showing.

Answer 1

In the end we decided to use the following hack:

 open: function (event, ui) {
     updateTooltipPositions();
 }

 function updateTooltipPositions() {
     $("[id^='ui-tooltip-']").css("left", mouseX-401);
     $("[id^='ui-tooltip-']").css("top", mouseY+1);
 }

In addition, IE was giving us some problems with manually closing tooltips. To avoid that we had to force that particular page out of quirks mode:

 <cfheader name="X-UA-Compatible" value="IE=Edge">   <!--- Force browser into standards mode --->

Neither of these are optimal solutions. However, they worked for our time-sensitive situation.