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

EDIT：私は（そうでないものとは対照的に）ツールチップで画像をタグ付けする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"属性を使用すると、ツールチップとどのません（単に後者の場合には、それを省略）を持つべき画像を正確に選択することができます。