Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Reverted from v. 12

...

Section
Column
width15%


Column
width70%
HTML
<div class="tooltip" id="tooltip"></div>

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

  <a href="https://docs.chaos.com/display/ENVISION/Menu+Bar">
         <rect x="2" y="2" width="993996" height="20" class="map-area" data-tooltip="Envision Menus"/>
</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="Envision Toolbar"/>
</a>

  <a href="https://docs.chaos.com/display/ENVISION/Left+Side+Panel" title="Left Side Panel">
      <rect x="2" y="55" width="232209" height="500" 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="767790" y="55" width="231208" height="500" class="map-area" data-tooltip="Right Side Panel"/>
  </a> 

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

  <a href="https://docs.chaos.com/display/ENVISION/Current+View+Quick+Settings">
    <rect x="240215" y="58" width="166" height="60" class="map-area" data-tooltip="Current View Quick Settings"/>
  </a>
</svg>
  
HTML
<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>
Column
width15%


...