Versions Compared

Old Version 5

changes.mady.by.user Gergana Lilkova

Saved on

compared with

New Version 6

changes.mady.by.user Gergana Lilkova

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Div
stylepadding:5px; row-gap: 0px;
classdashboard

Chaos Scatter

Variations Tab


...


Envision User Interface: Click on the highlighted panels to read more about Envision's user interface components.


CSS Stylesheet
.map-area {
  fill: transparent;
  stroke:  rgb(196, 58, 95);
  stroke-width: 2;
}

.map-area:hover {
  fill: rgba(196, 58, 95, 0.2); 
}

.tooltip {
      position: absolute;
      background-color: #333;
      color: #fff;
      padding: 5px 10px;
      border-radius: 4px;
      font-size: 12px;
      display: none;
      pointer-events: none;
      z-index: 10;
    }
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/101942334/Envision_Scheme.png?version=3&modificationDate=1731594568243&api=v2" width="1000" />

  <a href="https://docs.chaos.com/display/ENVISION/Menus">
         <rect x="2" y="2" width="993" 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="232" 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="767" y="55" width="231" 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="240" y="570" width="520" height="20" class="map-area"  data-tooltip="Bottom Panel"/>
 </a> 

  <a href="https://docs.chaos.com/display/ENVISION/Current+View+Quick+Settings">
    <rect x="240" 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%