Tooltip text on 10px left+right of svg arrow from XArrow

Question

I use XArrow component to draw lines between rectangles. I added some tooltip on the line and it works fine. However, I need to get my mouse right over the line in order to make the tooltip visible which is understandable but I need to make the tooltip visible when the mouse is near the line, let's say if cursor is 10 pixels on the left + right side of the arrow. This is what my design looks like right now, working tooltip and inspect elements of the curved arrow. Now I found some trick that enables me to show a tooltip when the cursor is near the arrow. This works for straight lines but it doesn't work for curved line. For the first picture, the code I use is

<span key={'j.id'}>
   <div key={`i.id-j.id`} data-for={`j.id-i.id`} data-tip>
     <Xarrow
       start={`i.id`}
       end={`j.id`}
       key={`i.id-j.id`}
     />
   </div>
   <ReactTooltip id={`j.id-i.id`}>{'tooltiptext'}</ReactTooltip>
</span>

Now if I add SVGCanvasStyle prop with pointerEvents: 'all'

<span key={'j.id'}>
   <div key={`i.id-j.id`} data-for={`j.id-i.id`} data-tip>
     <Xarrow
       start={`i.id`}
       end={`j.id`}
       key={`i.id-j.id`}
       SVGcanvasStyle={{ pointerEvents: 'all' }}
     />
   </div>
   <ReactTooltip id={`j.id-i.id`}>{'tooltiptext'}</ReactTooltip>
</span>

it looks like or the tooltip is shown over the path element (Picture1, 3rd row). Is there a way to show the tooltip on ~10px+ left and right of the arrow (an svg element, non linear in the curved case)? If possible, how can I achieve it?