Bild als Tooltip mit Dojo

Question

Ich versuche, ein Bild auf Mouseover eines anderen Bildes anzuzeigen. Ich benutze Dijit/Tooltip dafür. Problem ist, das Bild wird nicht beim ersten Mouseover angezeigt, es erscheint immer beim zweiten Mal. Die Bilder werden dynamisch angezeigt und haben eine dynamische ID erhalten.

<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

Mit Dijit/Tooltip ist keine Onmouseover-Funktion erforderlich. Mit Ihrem Code wird beim ersten Mouseover nur der Tooltip eingerichtet. Beim zweiten Mal wird der Tooltip angehängt und so angezeigt (und showImage() wird erneut ausgeführt, was nicht optimal ist). Sie müssen den Tooltip erstellen, wenn das Bild zum Dom hinzugefügt wird. Sie können auf die dijit/Tooltip guide verweisen, um ein Beispiel zu erfahren, wie Sie einen Tooltip deklarativ einrichten. Alternativ können Sie Ihren Code konvertieren, um die Bilder und ihre QuickInfos programmatisch hinzuzufügen.