Pannellum Example

Change class name on click in jQuery

HTML

<script src="https://cdn.pannellum.org/2.4/pannellum.js"></script>
<link rel="stylesheet" href="https://cdn.pannellum.org/2.4/pannellum.css">
<script src="https://pannellum.org/images/bma-1.jpg"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://s17.postimg.org/nza4h9ifj/poi4.png"></script>
<body>
  <div id="panorama"></div>
</body>

CSS

#panorama {
  width: 800px;
  height: 400px;
}

#controls {
  position: absolute;
  bottom: 0;
  z-index: 2;
  text-align: center;
  width: 100%;
  padding-bottom: 3px;
}

.ctrl {
  padding: 8px 5px;
  width: 30px;
  text-align: center;
  background: rgba(200, 200, 200, 0.8);
  display: inline-block;
  cursor: pointer;
}

.ctrl:hover {
  background: rgba(200, 200, 200, 1);
}

.custom-hotspot {
  height: 50px;
  width: 50px;
  background-image: url("https://s17.postimg.org/nza4h9ifj/poi4.png");
  background-size: 100% 100%;
}

div.custom-tooltip span {
  visibility: hidden;
  position: absolute;
  border-radius: 3px;
  background-color: #fff;
  color: #000;
  text-align: center;
  max-width: 200px;
  padding: 5px 10px;
  margin-left: -220px;
  cursor: default;
}

}

div.custom-tooltip:hover span {
  visibility: visible;
}

div.custom-tooltip:hover span:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-width: 10px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
  bottom: -20px;
  left: -10px;
  margin: 0 50%;
}

#overlay_image {
  position: relative;
}

.immagine {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  height: 150px;
  width: 150px;
}

JavaScript

var yaws = [];
var test = [];
var pitch = [];
var descr = [];
var eventDescr = [];
var eventId = [];
var eventIdLabel = [];
var descrConcat = [];
var urlPresent = [];
var url = [];
var loop;

getHotSpotsValues();
setTimeout(() => updateHTML("8", "visible"), 1000);

//Testing function
function paint360(pitch,yaws,eventId,eventDescr,urlPresent,url,descrConcat)
{
  
    viewer = pannellum.viewer('panorama', {
        "type": "equirectangular",
        //Photo url
        "panorama": "https://pannellum.org/images/bma-1.jpg",
        "showControls": false,
        "autoLoad": true,
        "compass": true,
        "northOffset": -10,
        //Bullseye to get yaw & pitch in debug mode
        //"hotSpotDebug": true,
       "hotSpots": [
        {
            "pitch": pitch[0],
            "yaw": yaws[0],
            "cssClass": "custom-hotspot",
            "createTooltipFunc": hotspot,
            "createTooltipArgs": descrConcat[0]
        },
        {
            "pitch": pitch[1],
            "yaw": yaws[1],
            "cssClass": "custom-hotspot",
            "createTooltipFunc": hotspot,
            "createTooltipArgs": descrConcat[1]
        },
        {
            "pitch": pitch[2],
            "yaw":yaws[2],
            "cssClass": "custom-hotspot",
            "createTooltipFunc": hotspot,
            "createTooltipArgs": descrConcat[2]
        }
    ]
    });
}

// Hot spot creation function
function hotspot(hotSpotDiv, args) {
    hotSpotDiv.classList.add('custom-tooltip');
    var span = document.createElement('span');
    var res = args.split("-");
    span.id = (res[1].trim());
    span.innerHTML = (res[0].trim());
    hotSpotDiv.appendChild(span);
    span.style.width = span.scrollWidth - 20 + 'px';
    span.style.marginLeft = -(span.scrollWidth - hotSpotDiv.offsetWidth) / 2 + 'px';
    span.style.marginTop = -span.scrollHeight - 12 + 'px';
}

function updateHTML(elmId, value) {
  var elem = document.getElementById(elmId);

   ...