Page History

<div class="tooltip" id="tooltip"></div>

 <svg width="1000" height="600">
  <image href="https://docs.chaos.com/download/attachments/162202143/Envision_MapScheme.png?version=14&modificationDate=17375406930451747125225793&api=v2" width="1000" />  

<a href="https://docs.chaos.com/display/ENVISION/Menu+Bar">
         <rect x="2" y="2" width="996" height="20" class="map-area" data-tooltip="Menus"/>
</a>

<a href="https://docs.chaos.com/display/ENVISION/Home+Screen" title="Chaos Envision Home">
         <rect x="7" y="28" width="18" height="17" class="map-area" data-tooltip="Chaos Envision Home"/>
</a>

<a href="https://docs.chaos.com/display/ENVISION/Toolbar" title="Toolbar">
         <rect x="305" y="26" width="400" height="26" class="map-area" data-tooltip="Toolbar"/>
</a>

  <a href="https://docs.chaos.com/display/ENVISION/Left+Side+Panel" title="Left Side Panel">
      <rect x="2" y="55" width="200208" height="510" class="map-area" data-tooltip="Left Side Panel" />
  </a>

  <a href="https://docs.chaos.com/display/ENVISION/Right+Side+Panel" title="Right Side Panel">
    <rect x="797790" y="55" width="200208" height="510" class="map-area" data-tooltip="Right Side Panel"/>
  </a> 

  <a href="https://docs.chaos.com/display/ENVISION/Bottom+Panel" title="Bottom Panel">
    <rect x="205" y="570" width="590" height="20" class="map-area"  data-tooltip="Bottom Panel"/>
 </a> 

  <a href="https://docs.chaos.com/display/ENVISION/Current+View+Quick+Settings">
    <rect x="206213" y="56" width="163" height="55" class="map-area" data-tooltip="Current View Quick Settings"/>
  </a>

   <a href="https://docs.chaos.com/display/ENVISION/Full+Screen+Viewport">
    <rect x="698691" y="56" width="24" height="23" class="map-area" data-tooltip="Full Scree Mode"/>
  </a>  </svg>  

<script>
    const tooltip = document.getElementById('tooltip');

    document.querySelectorAll('rect').forEach(rect => {
      rect.addEventListener('mouseenter', (e) => {
        const tooltipText = rect.getAttribute('data-tooltip');
        tooltip.innerText = tooltipText;
        tooltip.style.display = 'block';
      });

      rect.addEventListener('mousemove', (e) => {
        tooltip.style.left = `${e.pageX + 10}px`;
        tooltip.style.top = `${e.pageY + 10}px`;
      });

      rect.addEventListener('mouseleave', () => {
        tooltip.style.display = 'none';
      });
    });
  </script>