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

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())),
  ...

打破它会创建一个包含在 a 中的新元素，div并且 title 属性的内容被插入到divusinghtml()方法中，该方法会将字符串中的任何标记转换为 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="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中工作。

有关更多信息，请查看拉取请求。