HTML5 SVG Logo

HTML

<svg xmlns="http://www.w3.org/2000/svg"  width="100%" height="100%">

<g class="tooltips">
  <g class="tooltip2">
  <line x1="30" x2="30" y1="50" y2="100" stroke="#000" stroke-width="2"></line>
    <text text-anchor="middle" x="40" dy="50" >10</text>
  </g>
    <g class="tooltip2">
  <line x1="130" x2="130" y1="50" y2="100" stroke="#000" stroke-width="2"></line>
    <text text-anchor="middle" x="140" dy="50" >20</text>
  </g>
  <g class="tooltip2">
    <line x1="230" x2="230" y1="50" y2="100" stroke="#000" stroke-width="2"></line>
    <text text-anchor="middle" x="240" dy="50" >30</text>
  </g>
  <g class="tooltip2 last">
    <line x1="330" x2="330" y1="50" y2="100" stroke="#000" stroke-width="2"></line>
    <text text-anchor="middle" x="340" dy="50" >40</text>
  </g>

  <g class="tooltip">
    <text text-anchor="middle" x="20" dy="50" >-10</text>
  </g>
    <g class="tooltip">
    <text text-anchor="middle" x="120" dy="50" >-20</text>
  </g>
  <g class="tooltip">
    <text text-anchor="middle" x="220" dy="50" >-30</text>
  </g>
  <g class="tooltip last">
    <text text-anchor="middle" x="320" dy="50" >-40</text>
  </g>

</g>

<g class="qwe">
    <text text-anchor="middle" x="40" dy="110" >тут сверху </text>
    <text text-anchor="middle" x="140" dy="110" >тут сверху</text>
    <text text-anchor="middle" x="240" dy="110" >тут сверху</text>
    <text text-anchor="middle" x="340" dy="110" >тут сверху</text>
</g>
<svg>

SCSS

.tooltips {
  .tooltip, .tooltip2 {
    opacity: 0;
    cursor: pointer;
    &.last {
      opacity: 1;
    }
  }
}
.tooltips:hover {
    .tooltip.last {
        opacity: 0;
    }
    .tooltip2.last {
      opacity: 0;
    }
}

.tooltip2:hover {
  opacity: 1 !important;
}
.tooltip2:hover+.tooltip {
  opacity:1;
 }