圖像作爲工具提示使用dojo

Question

我試圖在另一圖像的鼠標懸停上顯示圖像。我爲此使用了dijit/Tooltip。問題是，圖像不會在第一次鼠標懸停時顯示，它始終會在第二次以後出現。圖像動態顯示，並給出了一個動態的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/Tooltip，不需要onmouseover功能。使用您的代碼，第一個鼠標懸停只會設置工具提示。第二次提示工具提示並顯示它（並再次運行showImage（），這不是最優的）。 您需要在將圖像添加到dom時創建工具提示。有關如何以聲明方式設置工具提示的示例，可以參考dijit/Tooltip guide。或者，您可以轉換您的代碼以編程方式添加圖像及其工具提示。