Question

我正在使用qTip2，我希望将图像显示为工具提示内容。我认为它可以由content属性设置，但我无法正确使用它。

我在链接上显示工具提示：

 <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, {

    }));

任何想法我应该如何将内容设置为这样的图像？

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

Answer 1

我可以使用下面的代码添加图像。

$(document).ready(function()
{
// Match all <A/> links.
$('a').qtip({
    content: {
        text: '<img src="http://www.ronedmondson.com/wp-content/uploads/2009/06/smiley-face1.jpg" />'
    }
   });
});

Answer 2

我认为您可以在DOM中添加要使用的图像，然后将其作为qtip的文本引用：

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

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

显示带有图像内容的工具提示

2 个答案: