使用 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 以获取有关如何以声明方式设置工具提示的示例。或者，您可以转换代码以编程方式添加图像及其工具提示。

使用 dojo 将图像作为工具提示

image as tooltip using dojo

dojo

tooltip