Hover Event over an Overlay that is not bind to a visual element

Hi Guys, I have many overlays set with class: highlight:hover

    .highlight:hover {
        filter:     alpha(opacity=70);
        opacity:    0.7;
        background-color: transparent;
    }

Without attaching any visual ui element to the overlay I can see the result of the outline around the overlays as soon as I am rolling over with the mouse on the overlay area.

What I would like to do is to have 1 visual element <div> attached to the side of the overlay as soon as the mouse is hover it. I am unable to find a way to get the hover event when rolling over an overlay unless I am attaching a visual element to it, what am I missing? Due to the fact that I have many overlays I don’t want to add to the dom so many ui elements just to present 1 tooltip. I want to be able to attach the tool tip without it. Thoughts?

[btelem]

Thanks Ian! very helpful!

[iangilman]

Unfortunately, due to the complicated gesture handling OpenSeadragon does, it ends up blocking some events, so things like $( ".highlight" ).hover won’t necessarily work. You need to use the MouseTracker instead.

Here’s an example for click, but the principle should be the same for hover:

https://codepen.io/iangilman/pen/mEkKaY

BTW, if you’re doing with 30,000 overlays, you might consider using one of the Canvas overlay plug-ins instead, so you can draw them dynamically as needed:

https://github.com/altert/OpenSeadragonCanvasOverlay https://github.com/joshua-gould/OpenSeadragonCanvasOverlayHd

Then you would get events on the viewer itself and do the math to figure out what was hit and what needs highlighting.