顯示圖片內容的工具提示

我正在使用qTip2，我希望將圖片顯示爲工具提示內容。我認爲它可以通過內容屬性來設置，但我無法正確理解。顯示圖片內容的工具提示

我顯示的鏈接工具提示：

<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" />

來源

2011-11-21 shennyL

允許我建議使用TooltipsY。到目前爲止，我用過的最好的工具提示jQuery插件。光年提前qTip2 –

我認爲，你可以添加你要在DOM使用，然後引用它作爲你的qtip的文本圖像：

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

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

來源

2011-11-21 11:21:02

嗨，我嘗試了同樣的方式，但工具提示沒有顯示..我想我走錯了方向，這個問題似乎是對fancybox的工具提示的使用... – shennyL

我這樣想是因爲我嘗試了我的解決方案在另一個頁面，它的工作 –

我能夠使用的代碼添加圖像下面。

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

來源

2011-11-21 11:39:07

嗨，我嘗試了同樣的方式，但工具提示沒有顯示..我想我會在一個錯誤的方向，這個問題似乎是對fancybox的工具提示的用法... – shennyL

這太不公平了，你沒有提到任何有關fancybox的問題！ –

對不起，但我發現這個問題後我發佈這個問題... – shennyL

顯示圖片內容的工具提示

回答

相關問題