Neighbouring hotspots overlapping tooltip.

[DStillingfleet]

Hi Matthew

Hope you are well and can give me some suggestions as to how I can overcome a problem with neighbouring hotspots over lapping a tooltip.

I have five hotspots marking neighbouring mountain peaks, some peaks are higher than others, so the hotspots are dispersed at different pitches.

When the cursor hovers over a hotspots, a tooltip appears with the name of the mountain along with summit photo. But depending upon which hotspot it is, the tooltip can be overlapped by a neighbouring hotspot. Example below.

I can sometimes over come the problem by changing the order the hotspots are created. But it is not always possible, and even worse when the hotspots are close to the top of the screen and my js moves the tooltip into view.

Any suggestions?

Many thanks

Derek

[mpetroff]

This looks to be a duplicate of #1117, but unlike the person who opened the previous issue, you've provided enough information for me to reproduce it. The key piece of information was that the order of the hot spots matters.

The issue has to do with how Chrome handles z-order (I can't reproduce it in Firefox). Since you're the second person to report it, and the first report was only two months ago, I figured it must have been due to a recent change in Chrome. However, based on testing with Sauce Labs, I determined that this actually first became an issue in Chrome 70, which was released October 2018. There's nothing in the release notes to suggest why this happened.

It seems that the only way to fix this will be to move the tool tips to be at the same level in the DOM hierarchy as the hot spots, instead of as children of the hot spots, since none of the simpler fixes I've attempted have worked. I'll try to get something working later this week.

[DStillingfleet]

Cheers Mathew. I tried a few work arounds, but like you, was stumped by the DOM hierarchy.

[KUJensen]

I had the same problem. The icons lay over the images. I solved this by using my own cssClass for it.

ptour.js: ... { "URL": "./RingmauermitHalbschalentuermen_437a08ed/Geschichte.jpg", "cssClass": "Foto", "image": "./RingmauermitHalbschalentuermen_437a08ed/Geschichte.jpg", "pitch": 10.328, "text": "Geschichte \n", "type": "Info", "width": 800, "yaw": -42.2 }, ...

CSS: :root { --MediaIconHeight: 30px; --MediaIconWidth: 30px; }

.Foto { height: var(--MediaIconHeight); width: var(--MediaIconWidth); background-image: url("../burgen/pannellum/icons/foto.png"); background-size: 100% 100%; z-index: 2!important; }

.Foto a{ pointer-events: none; cursor: zoom-in; z-index: 2!important; }

.Foto:hover ~ .Foto { z-index: 0!important; }

[DStillingfleet]

Thanks KUJensen.

I had custom classes for these icons, so all I needed to do was add the equivalent of your

.Foto:hover ~ .Foto {z-index: 0!important;}

i.e.

.HotSpotMountainPin:hover ~ .HotSpotMountainPin {z-index: 0!important;}

and it worked perfectly.

Kind regards

Derek

[mpetroff]

The subsequent-sibling combinator—a CSS feature I didn't realize existed—did the trick, so thanks for the suggestion @KUJensen! It allows for specifying CSS properties for siblings of the hot spot that is being hovered over that appear after it. In this case, it allows us to specify a lower z-index for them.

The complete fix involved incrementing the other z-index values, to give us an extra level to use. Otherwise, the tool tips will display over the controls, for example.