Skip to content

Tooltips disappearing on image maps in webkit browsers #109

Open
@ianphillip

Description

@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

Activity

stevenbenner

stevenbenner commented on Mar 17, 2014

@stevenbenner
Owner

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

whobbiazz commented on Sep 9, 2016

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    BugSoftware defects or other problems that should be fixed.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @stevenbenner@ianphillip@whobbiazz

        Issue actions

          Tooltips disappearing on image maps in webkit browsers · Issue #109 · stevenbenner/jquery-powertip