JSFiddle - React, Tailwind, and code Playground

by Ivan Minakov

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="tooltip">
    <text text-anchor="middle" x="20" dy="50" >-10</text>
  </g>
</g>

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

SCSS

.tooltips {
  .tooltip, .tooltip2 {
    opacity: 0;
    cursor: pointer;
  }
}
.tooltip2:hover {
  opacity: 1 !important;
}
.tooltip2:hover+.tooltip {
  opacity:1;
 }