通过JavaScript添加工具提示

Question

我想添加一个显示图像的工具提示。这需要通过JS注入完成。我可以使用jQuery。对于测试 - 我对这两个视图都使用相同的图像，当用户将鼠标悬停在图像上时，它应该在工具提示中显示相同的图像。这里是一个没有工作的我当前的代码：

<img src="https://images.quickbase.com/si/16/751-binary_view.png" onload="$(this).tooltip({content: "<img src='https://images.quickbase.com/si/16/751-binary_view.png'/>"});"> 

Answer 1

编辑：我添加了一个data-tooltip来标记提示的图像（相对于那些不）。

必须逃脱引号（至少）：

<img src="https://images.quickbase.com/si/16/751-binary_view.png" 
    onload="$(this).tooltip({ 
    content: \"<img src='https://images.quickbase.com/si/16/751-binary_view.png'/>\" 
    });" 
/> 

也许是更好地保持它的标签外完全。

<img src="https://images.quickbase.com/si/16/751-binary_view.png" 
    data-tooltip="true" /> 

，并在头的地方：

$(function() { 
    $("img[data-tooltip='true']").each(function() { 
    $(this).on("load", function() { 
    var content; 

    content = "<img src='{src}'/>".replace("{src}", $(this).attr("src")); 
    $(this).tooltip({ "content": content }); 
    }); 
    }); 
}); 

的data-tooltip="true"属性允许你选择哪些图像应该有一个提示，并且没有（简单地忽略它在后一种情况下）。