Question

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

Answer 1

是。它支持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方法将title属性的内容插入html()，这将转换任何标记。字符串到html元素。

以下代码：

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

将导致工具提示看起来像

这是粗体这不是

Answer 2

在Foundation v6.3 +中，您可以追加属性data-allow-html =＆＃34; true＆＃34;在工具提示中允许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。

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

2 个答案: