Question

我已经在我的网站应用程序中实现了Tooltipster。
应用程序使用PHP从mysql数据库中提取数据，并使用数据以形成SVG元素。然后使用
显示SVG元素 PHP回声。

包含在SVG中的是Class和title属性工具提示。 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个工具提示显示

工具提示未正确分配SVG工具提示

0 个答案: