how can i bind event to g.layer-above > g.shapelayer?

i use shapes for vertical dash-line
like this
image

but… i heard shapes is not supported mouse hover tooltip.
so i try to custom event for tooltip in shapes use jquery

const divs = document.querySelectorAll('svg:nth-child(3)');
or
const divs = document.querySelectorAll(''g.layer-above > g.shapelayer');
      divs.forEach(function(div) {
        console.log(div);
        div.addEventListener('mouseover', function(event) {
          console.log(event);
        });
      });

but I didn’t get the results I wanted.
so Is there any other way?

Here’s one way: https://codepen.io/etpinard/pen/oJejeR

wow! it is working for me
really thank you!!