hotspots not showing text when hover

[valkyrjas074]

I don't know why my hotspots are not showing text when hover (especially info type). This is parts of my code, I've tried to make some changes in pannellum.js but it doesn't fix the problem.

var viewer1, viewer2, viewer3, viewer4, viewer5, viewer6, viewer7, viewer8
document.addEventListener('DOMContentLoaded', function() {
    if (document.getElementById('panorama1')) {
        viewer1 = pannellum.viewer('panorama1', {
            // "hotSpotDebug": true,
            // Define the default settings for all scenes   
            "default": {
                "firstScene": "1stFloor-1",
                "sceneFadeDuration": 1000,
                "autoLoad":true,
            },
            // Define the individual scenes within the panorama
            "scenes": {
                // Define the first scene, called 'entry'
                "1stFloor-1": {
                    "title": "Welcome to USTH Building Virtual Tour",
                    "hfov": 130,
                    "pitch": 5,
                    "yaw": -6,
                    "type": "equirectangular",
                    "panorama": "http://usthmaptesting.local/wp-content/uploads/2024/09/1-8-1.jpg",
                    "debug": true,
                    "hotSpots": [
                                {
                                    "pitch": -5,
                                    "yaw": -10,
                                    "type": "scene",
                                    "text": "Go inside",
                                    "sceneId": "1stFloor-2",
                                },
                                {
                                    "pitch": -38,
                                    "yaw": 161,
                                    "type": "scene",
                                    "text": "Go Outside",
                                    "sceneId": "1stFloor-8",
                                },
                                {
                                    "pitch": -4.8,
                                    "yaw": -74.4,
                                    "type": "info",
                                    "text": "Reception Room",
                                }

[mpetroff]

There's nothing wrong with the configuration you've posted, so the issue must be something else on your page. I would guess that it's something CSS related, given that's how the tooltips are displayed.

[valkyrjas074]

Sorry for the delay. Somehow the text works when hover but it got too big and the panorama got a little white space above, I'd tried to add !important in the .css but it didn't work.

[mpetroff]

You're changing the font size in the context of the Pannellum <div>, and Pannellum doesn't reset it. Adding this to your CSS should work:

.pnlm-container {
  font-size: 16px;
}

Typically, folks set the font size on p, h1, h2, etc., not on an element that would affect Pannellum, which I suspect is why this issue has not previously been reported. Hot spot text was the only place in Pannellum that the font size was not explicitly set, but I changed this in 1eaccef60f75c8553997b37fe5d9784b2ed7b07a to avoid this in the future (using the same CSS suggested above).

[valkyrjas074]

The problem is that I have another .css loaded so add font-size to all of them make it works. Somehow the panorama 2F in my site doesn't fit the container, do you know why?

/* Basic styling for the entire page */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

html {
  scroll-behavior: smooth;
}

/* Link styling */
a {
  text-decoration: none;
}

/* Styling for the panorama container */
#panorama1, #panorama2, #panorama3, #panorama4, #panorama5, #panorama6, #panorama7, #panorama8 {
  width: 100%;
  height: 500px; /* Adjust this height as per your needs */
  background-color: #f9f9f9; /* Optional background while panorama loads */
  font-size: 16px !important;
}

.hotspot {
  font-size: 16px; /* Set the font size to 10px */
  color: #000; /* Optional: Set the text color */
  position: relative; /* Ensure it's positioned correctly within the panorama */
}

.floor-map {
  display: flex;
  flex-direction: column;
}

.floor {
  cursor: pointer;
  padding: 10px;
  margin: 5px;
  background-color: lightgray;
}

.floor.active {
  background-color: lightblue;
}

.photo {
  display: none;
}

.photo.active {
  display: block;
}

[mpetroff]

It seems to have 20-25px of top padding added to the panorama <div>, although it's not in the CSS you posted.