Question

I am using qTip2 and I wish to show an image as the tooltip content. I think it can be set by the content property, but I just could not get it right.

I am showing a tooltip on a link:

 <li class="answer">We provide personalised <a id="aboutshop" href="@Url.Action("Index", "Shop")">
        shopping list</a> based on what you have in your stock</li>


    // Tooltip for about shop link
    $('#aboutshop').qtip($.extend({}, myStyle, {

    }));

Any idea how should I set the content to be an image like this?

  <img src="../../Content/HomePage/aboutshop.JPG" />

Answer 1

I think that you could add the image you want to use in the DOM and then reference it as the text of your qtip:

<img id='tooltip1' style="display:none;" src="../../Content/HomePage/aboutshop.JPG" />

$('#aboutshop').qtip({
   content: {
      text: $('#tooltip1') 
   }
});