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

Question

Foundation的工具提示是否支持使用HTML呢？

- ivayloc

Answer 1

是的。它支持在标题属性中使用HTML。

来自foundation.tooltip.js：

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

把它分解开来，它创建一个被div包裹的新元素，并使用html()方法将标题属性的内容插入到div中，该方法将在字符串中转换任何标记为HTML元素。

下面是代码：

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

将会产生一个类似于工具提示的效果，如下所示

这是粗体 这不是

- JaredMcAteer

Answer 2

在Foundation 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 中的工作示例。

欲了解更多信息，请查看 拉请求。

- Aki