I am trying to add a tooltip that shows an image. This needs to be done via JS injection. I can use jQuery. For testing - I am using the same image for both the view, and when a user hovers over the image it should show the same image in the tooltip. Here is my current code that is not working:
<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'/>"});">
EDIT: I've added a data-tooltip to tag the images with tooltips (in contrast to those that don't).
You must escape the quotes (at least):
<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'/>\"
});"
/>
Maybe it's better to keep it outside the tag altogether.
<img src="https://images.quickbase.com/si/16/751-binary_view.png"
data-tooltip="true" />
and somewhere in the header:
$(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 });
});
});
});
The data-tooltip="true" attribute allows you to choose exactly which images should have a tooltip and which not (simply omit it in the latter case).
