Tooltips disappearing on image maps in webkit browsers

[ianphillip]

I'm using PowerTip on an image map, with mouse following set to true.

It works as expected in Firefox, but in the latest versions of Chrome, Safari and Opera Next the tooltips vanish after a second, even if the mouse is still over the hot-zone. I've confirmed that the same code works normally with standard anchor tags in the same browsers, so it does seem to be an image map issue.

There's a test page at http://www.iriss.org.uk/sites/all/files/temp/test.html

[stevenbenner]

Yeah, there a known issues with image maps right now. This is most likely because the getBoundingClientRect() function is not set up to handle the complex shapes found in image maps and basically gives up.

I'll mark this as a bug and do some digging. Hopefully there is another way to get the dimensions and coordinates of the element that doesn't involve building a big system to compute it.

And thank you for putting together that test page, it's actually really really helpful!

[whobbiazz]

Workaround for PowerTip - v1.2.0 - 2013-04-03 ...

Replace isMouseOver function with the following:

    function isMouseOver(element) {
        // use getBoundingClientRect() because jQuery's width() and height()
        // methods do not work with SVG elements
        // compute width/height because those properties do not exist on the object
        // returned by getBoundingClientRect() in older versions of IE
        var elementPosition = element.offset(),
            elementBox = element[0].getBoundingClientRect(),
            elementWidth = elementBox.right - elementBox.left,
            elementHeight = elementBox.bottom - elementBox.top;

        if (elementWidth != 0 && elementHeight !=0) {
            return session.currentX >= elementPosition.left &&
                session.currentX <= elementPosition.left + elementWidth &&
                session.currentY >= elementPosition.top &&
                session.currentY <= elementPosition.top + elementHeight;
        }
        else {
            return true;
        }
    }

Updated function returns true in cases where getBoundingClientRect() produces invalid result.