[webkit-help] JavaScript question: how to find out the position of a tooltip relative to the document body in a zoomed and scrolled page

Xiaomei Ji xji at chromium.org
Mon Oct 12 14:52:53 PDT 2009


In case anyone interested.
Using event.pageX and event.pageY instead of
"event.clientX + document.body.scrollLeft;" and
"event.clientY + document.body.scrollTop;"
will position the tooltip correctly in JS.

Thanks,
Xiaomei


On Mon, Oct 5, 2009 at 4:55 PM, Xiaomei Ji <xji at chromium.org> wrote:

> I am trying to display a tooltip under the mouse when mouse stays at a
> position long enough.
> I am using "absolute" positioning, set the tooltip as the child of the
> document.body, and set the style.left and style.top as event.clientX +
> document.body.scrollLeft and event.clientY + documentbody.scrollTop.
> Following is the related code:
>
> tooltip.style.position = "absolute";
> var x = event.clientX + document.body.scrollLeft;
> var y = event.clientY + document.body.scrollTop;
> tooltip.style.left = x + "px";
> tooltip.style.top = y + "px";
> document.body.appendChild(tooltip);
>
> But it does not work in a scrolled and zoomed page. (works fine in a
> scrolled page without zooming  or zoomed page without scrolling).
>
> I think the (x, y) need to be adjusted by pageZoomFactor.
> But I did not find pageZoomFactor is exposed through JS.
>
> I tried to change the position to be "fixed" and hide the tooltip
> onMouseWheel/onMouseDown/onKeyDown event to comprise "fixed element does not
> scroll with the rest of the document", but I still could not find the right
> position value for the tooltip in case of scolled and zoomed page.
>
> Anyone has any idea how should I position the tooltip correctly in JS? Does
> pageZoomFactor has to be exposed in JS to make it work?
>
>
> Thanks,
> Xiaomei
>
>
>
>
>
>
>
>
>
>
>
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-help/attachments/20091012/feeed44a/attachment.html>


More information about the webkit-help mailing list