写真に複数のツールチップツールチップを挿入するにはどうすればいいですか？

Question

JQueryプラグインのTooltipsterでツールチップを作成しますが、質問があります。ユーザーがカーソルを画像のある特定の位置、たとえば画像内の人の頭部に置いたときに、ツールチップを表示するにはどうすればよいですか。画像はJPG形式です。

 <script> 
     $(document).ready(function() { 
      $('.Tooltip').tooltipster({ 
       animation: 'grow', 
       delay: 100, 
       interactive: true, 
       zIndex: 1, 
       maxWidth: 300, 
       repositionOnScroll: true, 
       trigger: 'custom', 
       triggerOpen: { 
        mouseenter: true, 
        tap: true 
       }, 
       triggerClose: { 
        mouseleave: true, 
        tap: true 
       }, 
       coord: { 
        left: 100, 
        top: 100 
       } 
      }); 
     }); 
    </script> 

私はcoordを使用しようとしましたが動作しません。間違ったことや何かを逃したのですか？ありがとうございました。

Answer 1

あなたのhtml に<svg>要素を埋め込み、<svg>内のあなたの.jpgを置くことによってこれを達成することができます。あなたは、このような画像の上に形状 を定義することができます。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/ 
    <g> 
     <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="yourImage.jpg"></image> 
     <circle class="Tooltip" cx="263" cy="72" r="4" style="fill: rgb(206, 206, 206);" fill-opacity="0.4"> 
      <title>Your Tooltip</title> 
     </circle> 
    </g> 
</svg> 

を図形を透明にするfill-opacity0に設定することを確認します。

注： TooltipsterはSVGでうまく動作しますが、それを動作させるには他にもいくつかのスクリプトを含める必要があります。 hereを参照してください。