Bootstrap 3 工具提示显示原始 HTML 而不是 HTML 格式的文本答案

【问题标题】：Bootstrap 3 Tooltip displaying raw HTML instead of HTML formatted textBootstrap 3 工具提示显示原始 HTML 而不是 HTML 格式的文本
【发布时间】：2014-06-08 23:27:03
【问题描述】：

我正在尝试使用 Bootstrap 3 工具提示来显示一些自定义 HTML 格式的文本。我已将工具提示包装在 Ember 组件中以供以后重复使用。

如下所示，我将 data-html 属性设置为 true，并将标题设置为任意 HTML 格式文本，但是当我悬停以触发工具提示时，它会显示原始 HTML 字符串。

工具提示组件：

App.ToolTipComponent = Ember.Component.extend
  text:       undefined
  placement:  undefined
  html:       undefined
  htmlText:   undefined

  afterRenderEvent: ->
    childElem = @$(":first-child")
    childElem.attr('data-toggle', 'tooltip')
    childElem.attr('data-trigger', 'hover')
    childElem.attr('data-placement', @get('placement'))

    childElem.attr('data-html', 'true')
    childElem.attr('title', '<b>Test Data</b>')

    childElem.tooltip()

这就是应用程序上的输出。将鼠标悬停在“testCampaign”上时会触发工具提示，如您所见，仅显示原始 HTML。

这是来自 Chrome 开发工具的检查。与具有相同功能的小提琴here 相比，我看不出需要更改什么。

<div data-toggle="tooltip" data-trigger="hover" data-placement="top" data-html="true" title="<b>Test Data</b>">
  <script id="metamorph-132-start" type="text/x-placeholder" data-toggle="tooltip" data-trigger="hover" data-placement="top" data-html="true" title="<b>Test Data</b>"></script>
  "testCampaign"
  <script id="metamorph-132-end" type="text/x-placeholder"></script></div>

任何帮助将不胜感激。

【问题讨论】：

标签： javascript jquery twitter-bootstrap ember.js coffeescript

【解决方案1】：

在您的小提琴中，您填充了 data-title 属性。

data-title="

复杂 HTML
">

在您提供的示例中，您只填充了 title 属性：

title="测试数据"

同样在您提供的示例中，您打开了脚本标签，但没有关闭它

<div data-toggle="tooltip" data-trigger="hover" data-placement="top" data-html="true" title="<b>Test Data</b>">
  <script id="metamorph-856-start" type="text/x-placeholder" data-toggle="tooltip" data-trigger="hover" data-placement="top" data-html="true" title="<b>Test Data</b>">
  testCampaign
</div>

【讨论】：

小提琴是我用来提出这个实现的例子。当我尝试填充 data-title 属性时，工具提示根本不显示。感谢您找到该脚本错字。我试图删掉不相关的领域，一定是一个角色走得太远了。我现在会更新。

【解决方案2】：

我创建了您提到的 Fiddle 的新分支并实现了您的组件： https://jsfiddle.net/hwzbxuwL/4/

我已将 afterRenderEvent 更新为 didInsertElement（这可能更符合自您发布以来 Ember 更新的 API 更改）。

App.ToolTipComponent = Ember.Component.extend
    text:       undefined
    placement:  undefined
    html:       undefined
    htmlText:   undefined
    didInsertElement: ->
      childElem = @$(":first-child")
      childElem.attr('data-toggle', 'tooltip')
      childElem.attr('data-trigger', 'hover')
      childElem.attr('data-placement', @get('placement'))

      childElem.attr('data-html', 'true')
      childElem.attr('title', '<b><i>Test Data</i></b>')

      childElem.tooltip()

我还添加了最新的（截至本文发布时）Ember v1.11.1 以及在 jsfiddle 中运行它所需的一些其他部门。

如果您仍然遇到组件问题，您能否分享更多详细信息。

【讨论】：