画像をツールチェアとして使用する

Question

別の画像のマウスオーバー時に画像を表示しようとしています。私はdijit/Tooltipを使っています。問題は、最初のマウスオーバーで画像が表示されず、2回目以降も常に表示されることです。イメージは動的に表示され、動的IDが与えられます。

<c:forEach items="${model.images}" var="image" varStatus="status"> 
    <img src="${image.url}" height="50" onmouseover="showImage('${image.id}')" id="image${image.id}" /> 
<c:forEach> 

<script> 
    function showImage(name) { 
     require(["dijit/Tooltip", "dojo/domReady!"], function(Tooltip){ 
      new Tooltip({ 
       connectId: ["image"+name], 
       label: "<img src='/images/"+name+"'/>" 
      }); 
     }); 
    }; 
</script> 

Answer 1

dijit /ツールチップでは、オンマウスオーバー機能は必要ありません。あなたのコードでは、最初のマウスオーバーはツールチップのみを設定します。 2度目のツールヒントが添付されて表示されます（最適化されていないshowImage（）が再度実行されます）。 イメージがdomに追加されたら、ツールチップを作成する必要があります。ツールチップを宣言的に設定する方法の例は、dijit/Tooltip guideを参照してください。また、コードを変換して、画像とそのツールチップをプログラムで追加することもできます。