jquery click position after css zoom / -webkit-transform

Question

I have a web application that uses fixed css width. (1280px).

With jquery, I added something like

$("html").css("zoom",window["zoomRatio"], "important");

as well as -webkit-transform and the one for mozilla.

Everything works fine, except I realized that one of my chart with the jquery flot plugin doesn't work (tooltip remained to be triggered at the original position before zoom)

Looking into it, I realized that it is the jquery.bind() that caused the problem. Is there anyway I can alter the mouseover position?

Basically I am looking for a way to pretend the mouse is at a different position. I looked for this information online, but I cant find much useful info.

Thanks

Edit (my code for the tooltip)

   function showTooltip(x, y, contents) {
    $('<div id="tooltip">' + contents + '</div>').css( {
        position: 'absolute',
        display: 'none',
        top: y + 5,
        left: x + 5,
        border: '1px solid #fdd',
        padding: '2px',
        'background-color': '#fee',
        opacity: 0.80
    }).appendTo("body").fadeIn(200);
}

var previousPoint = null;
$("#placeholder").bind("plothover", function (event, pos, item) {
    $("#x").text(pos.x.toFixed(2));
    $("#y").text(pos.y.toFixed(2));

    if ($("#enableTooltip:checked").length > 0) {
        if (item) {
            if (previousPoint != item.dataIndex) {
                previousPoint = item.dataIndex;

                $("#tooltip").remove();
                var x = item.datapoint[0].toFixed(2),
                    y = item.datapoint[1].toFixed(2);

                showTooltip(item.pageX, item.pageY,
                            item.series.label + " of " + x + " = " + y);
            }
        }
        else {
            $("#tooltip").remove();
            previousPoint = null;            
        }
    }
});

Answer 1

Because your tooltip has incoming x and y values provided for that function, you need to test if a zoom condition is currently true .

Edit: This is done by creating a new if statement with two new variables of zoomActivated and zoomOnset to work with your existing markup. This if statement will be invoked whenever a zoom condition is true.

Fragment code example:

function showTooltip(x, y, contents) {

    if(zoomActivated){

        x = x + zoomOnset;
        y = y + zoomOnset;

    }

    $('<div id="tooltip">' + contents + '</div>').css( { ....

The above will check to see if zoomActivated is Boolean true and if so will adjust both x and y to compensate for the objects position that's affected by the zoom method . That variable is set true when you are calling your jQuery zoom method, and reset to false when that zoom method has completed/returned to original state.

The global variable zoomOnset is based on the current zoom magnitude, assuming that the zoom is for both x and y . The actual value is a fixed value reflective of the fixed zoom value.