ToolTips for Articulate Storyline Elements

    function createTooltip() {
  const style = document.createElement('style');
  style.innerHTML = `
    .tooltip {
      position: absolute;
      background-color: #333;
      color: #fff;
      padding: 5px;
      border-radius: 5px;
      display: none;
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
    }
  `;
  document.head.appendChild(style);

  const elementsWithTooltip = document.querySelectorAll('[data-acc-text]');

  const tooltip = document.createElement('div');
  tooltip.className = 'tooltip';
  document.body.appendChild(tooltip);

  elementsWithTooltip.forEach(element => {
    element.addEventListener('mouseover', function(event) {
      const tooltipText = element.getAttribute('data-acc-text');

      tooltip.style.left = (event.clientX + 10) + 'px';
      tooltip.style.top = (event.clientY + 10) + 'px';

      tooltip.textContent = tooltipText;

      tooltip.style.opacity = 1;
      tooltip.style.display = 'block';
    });

    element.addEventListener('mouseout', function() {
      tooltip.style.opacity = 0;
      setTimeout(() => {
        tooltip.style.display = 'none';
      }, 300);
    });
  });
}

createTooltip();