通過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"屬性允許你選擇哪些圖像應該有一個提示，並且沒有（簡單地忽略它在後一種情況下）。