changes.mady.by.user Gergana Lilkova
Saved on Jan 08, 2025
...
<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>
<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>