使用 tooltipster 将工具提示显示为 div 的 innerHTML 的一部分

Question

我正在使用 tooltipster 生成工具提示。一切正常，除非我需要使用简单的 JavaScript 函数根据用户输入设置 div 的内容。 div 内容由图像组成，将鼠标悬停在每个图像上时，应显示工具提示。但是，提示显示为默认浏览器的行为是显示带有图像的 title=。我使用的 JavaScript 很简单：

function setAwards() {
var awardsdiv=document.getElementById("awards"); awardsdiv.innerHTML="";
if (document.setvalues.superstar.checked == true) awardsdiv.innerHTML=awardsdiv.innerHTML + "<img class=\"tooltip\" title=\"Description of award\" width=\"16\" src=\"/pix/superstar.png\" alt=\"[ Super Star ]\" />";
[... stuff removed ...]
}

有没有办法让它工作？工具提示会显示在该网页的其他地方，因此所需的资源似乎已正确设置。

谢谢！

Answer 1

您必须在插入新的 HTML 内容或使用委托后初始化工具提示 ($(...).tooltipster({...}))。

对于 "automatic" 初始化，您可能需要为此使用委托事件侦听器，请参阅 https://github.com/iamceege/tooltipster/issues/499

使用 tooltipster 将工具提示显示为 div 的 innerHTML 的一部分

using tooltipster to display tool tips as part of innerHTML for a div

javascript

jquery

tooltipster