CODEWITHSUNDEEP
javascripthtmlimagetooltip
Jim M
Jim M

Reputation: 351

Add Tooltip via JavaScript

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'/>"});">

Upvotes: 1

Views: 898

Answers (1)

pid
pid

Reputation: 11597

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).

Upvotes: 2

Related Questions