SVG popup doesn't cover background text

Question

When I hover over a graph or point on a graph, a modal window appears, but this window does not overlap the text below it and it overlaps one another

Code of SVG popup

<g class="highcharts-label highcharts-tooltip highcharts-color-undefined" style="pointer-events:none;white-space:nowrap;" data-z-index="8" transform="translate(274,213)" opacity="1" visibility="visible">

<path fill="none" class="highcharts-label-box highcharts-tooltip-box highcharts-shadow" d="M 3.5 0.5 L 143.5 0.5 C 146.5 0.5 146.5 0.5 146.5 3.5 L 146.5 42.5 C 146.5 45.5 146.5 45.5 143.5 45.5 L 3.5 45.5 C 0.5 45.5 0.5 45.5 0.5 42.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" stroke="#000000" stroke-opacity="0.049999999999999996" stroke-width="5" transform="translate(1, 1)"></path>

<path fill="none" class="highcharts-label-box highcharts-tooltip-box highcharts-shadow" d="M 3.5 0.5 L 143.5 0.5 C 146.5 0.5 146.5 0.5 146.5 3.5 L 146.5 42.5 C 146.5 45.5 146.5 45.5 143.5 45.5 L 3.5 45.5 C 0.5 45.5 0.5 45.5 0.5 42.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" stroke="#000000" stroke-opacity="0.09999999999999999" stroke-width="3" transform="translate(1, 1)"></path>

<path fill="none" class="highcharts-label-box highcharts-tooltip-box highcharts-shadow" d="M 3.5 0.5 L 143.5 0.5 C 146.5 0.5 146.5 0.5 146.5 3.5 L 146.5 42.5 C 146.5 45.5 146.5 45.5 143.5 45.5 L 3.5 45.5 C 0.5 45.5 0.5 45.5 0.5 42.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" stroke="#000000" stroke-opacity="0.15" stroke-width="1" transform="translate(1, 1)"></path>

<path fill="rgba(247,247,247,0.85)" class="highcharts-label-box highcharts-tooltip-box" d="M 3.5 0.5 L 143.5 0.5 C 146.5 0.5 146.5 0.5 146.5 3.5 L 146.5 42.5 C 146.5 45.5 146.5 45.5 143.5 45.5 L 3.5 45.5 C 0.5 45.5 0.5 45.5 0.5 42.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" stroke="#5b9204" stroke-width="1"></path>
</g>

Code of spans

<div class="highcharts-axis-labels highcharts-xaxis-labels " style="position: absolute; left: 0px; top: 0px; opacity: 1;">

<span opacity="1" style="font-family: &quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Arial, Helvetica, sans-serif; font-size: 11px; position: absolute; white-space: nowrap; color: rgb(102, 102, 102); cursor: default; margin-left: 0px; margin-top: 0px; left: 22.1131px; top: 246px; transform: rotate(-45deg); transform-origin: 100% 11px; text-overflow: ellipsis; overflow: hidden; opacity: 1;">

<div style="text-overflow: ellipsis; overflow: hidden;">2022-02-01</div>

</span>
</div>

So in this case i've tried opacity, z-index, color, background - color, fill, even if i made color of SVG popup i still can see the text under. Made something like :hover and z-index:-1 of spans is not a case, because so many graphics and reports in this app, and its take to much time to change this code in all places