如何在Foundation的工具提示中使用html？

是否可以在Foundation的工具提示中使用html？如何在Foundation的工具提示中使用html？

2012-11-26 ivayloc

是的。它支持。請檢查this link。我試過簡單的HTML和支持。你必須把html放在title屬性中。

2012-11-27 09:13:36 shayan

Thx，但有可能使用html元素，如「

」作爲我們的工具提示內容的容器？ – ivayloc

是的。這是可能的。它使用html（）所以支持它。你可以訪問http://foundation.zurb.com/docs/elements.php頁面並使用螢火蟲編輯tooltip元素並測試它。抱歉！我無法在jsfiddle上找到基礎js文件來向您展示一個示例。 – shayan

@shayan您提供的鏈接不能正常工作 –

是的。它在title屬性中支持html。

從foundation.tooltip.js：

create : function ($target) { 
    var $tip = $(this.settings.tip_template(this.selector($target), $('<div></div>').html($target.attr('title')).html())), 
    ...

斷裂下來它創建包裹在一個div一個新的元素和標題屬性的內容被插入到div使用html()方法，該方法將將字符串中的任何標記轉換爲html元素。

下面的代碼：

<img src="example.png" 
    class="general-infotip has-tip tip-top" 
    data-tooltip 
    title="<b>This is bold</b> This is not" />

將導致工具提示，看起來像

這是大膽的這不是

來源

2014-01-24 15:53:21 JaredMcAteer

在基金會V6.3 + ，您可以將屬性data-allow-html =「true」附加到元素以允許工具提示中的html。

例如：

<span data-tooltip data-allow-html="true" aria-haspopup="true" 
     class="has-tip" data-disable-hover="false" tabindex="1" 
     title="Fancy word for a <strong>beetle</strong>. <br><br><img src=https://pbs.twimg.com/profile_images/730481747679432704/uc08_dqy.jpg />"> 

    Scarabaeus 

</span>

這是工作在jsfiddle。

欲瞭解更多信息，請查看pull request。

來源

2017-11-09 13:05:15 Aki

如何在Foundation的工具提示中使用html？

回答

相關問題