Tooltipster неправильно распределяет подсказки SVG

Я реализовал Tooltipster в своем веб-приложении.
приложение извлекает данные с помощью PHP из базы данных MySQL и использует
данные для формирования элементов SVG. Элементы SVG затем отображаются с использованием
PHP эхо.

В SVG встроены атрибуты Class и title, необходимые для
Tooltipster. Приложение Tooltipster, очевидно, работает как
всплывающие подсказки, правильно отформатированные, отображаются на некоторых отображаемых SVG
элементы. Мой код кажется мне последовательным в его реализации
для всплывающей подсказки.

Мне кажется, что событие наведения не работает постоянно ИЛИ что
Приложение Tooltipster не знает, где находится мышь.

Код ниже, который может иметь отношение:

if ($yourArray3[$index]['tablelocator']==1)
{
$gid=$yourArray1[$index]['StrokeTypeID']+700;
$gbid=$yourArray1[$index]['StrokeTypeID']+800;

$stroke1svg = sprintf('<defs>
<clipPath id="clip">
<rect id="rect" x="30" y="100" height="380" width="540"  rx="25"style="fill:rgb(0,0,255);stroke-width:2;stroke:rgb(255,0,0)"visibility="hidden"/>
<use xlink:href="#rect"/>
</clipPath>
</defs>
<use xlink:href="#rect"/>
<image xlink:href="%5$s"  id="%6$d"  x="20" y="20" height="540"width="580" clip-path="url(#clip)" visibility="hidden"/>
<rect id="%9$d" x="%7$d" y="%10$d" rx="5" ry="5"  class="chtooltip"title="%11$s" width="50" height="20" fill="url(#button_surface)"stroke="#360000"filter="url(#virtual_light)"></rect>
<text id="%4$d" x="%1$d" y="%8$d" font-weight="400" style="font-
family: Arial; font-size  : 14; stroke: white;" fill: white;"onmousemove="ShowCoachStroke(this.id)"onmouseout="HideCoachStroke(this.id)" >%3$s</text>',

$yourArray1[$index]['StartPathwayXCoord']+$tb1xcoord,
($yourArray1[$index]['StartPathwayYCoord'])+($test*$rows)+$offset,
$yourArray1[$index]['Abbreviation'],
$yourArray1[$index]['StrokeTypeID']+600,
$yourArray1[$index]['ImageFilePath'],
$gid,
$yourArray1[$index]['StartPathwayXCoord']+$tb1xcoord-10,
($yourArray1[$index]['StartPathwayYCoord'])+($test*$rows)-
($offset+5),
$gbid,
($yourArray1[$index]['StartPathwayYCoord'])+($test*$rows)-
($offset+20),
$yourArray1[$index]['Description']);
$svg=$svg .$stroke1svg;
$stroke1svg="";

The above code adds database data to the various SVG elements in one
of 3 tablelocator locations on the screen.


The following code are the external files used with the application:

<!-- External Javascript and CSS files to be used as apart
of the Tooltipster implementation -->
<link rel="stylesheet" type="text/css"href="tooltipster/dist/css/tooltipster.bundle.min.css" />
<script type="text/javascript"src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script type="text/javascript"src="tooltipster/dist/js/tooltipster.bundle.min.js"></script>
<script type="text/javascript"src="tooltipster/dist/js/plugins/tooltipster/SVG/tooltipster-
SVG.min.js"></script>
<script type="text/javascript" src="tooltipster/svg.screenbox.js-
master/dist/svg.screenbox.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.5/svg.js">
</script>

<!-- External CSS file to be used for this application -->
<link rel="stylesheet" type="text/css" href="style.css">

<script>
$(document).ready(function() {
$('.chtooltip').tooltipster();
});

$('.chtooltip').tooltipster({
touchDevices: true,
trigger: "hover",
interactive: true,
animation: 'fade',
delay: 20,
theme: ".tooltipster-default",
plugins: 'SVG'
});
</script>

Любая помощь оценивается как 25% появления подсказок не очень
удобный. Изображение приложения ниже:

SVG и 1 всплывающая подсказка