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

Question

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

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

工具提示组件：

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>

非常感谢任何帮助。

Answer 1

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

  

data-title =“＆lt; table＆gt;＆lt; tr＆gt;＆lt; td style ='color：red;'＆gt; complex＆amp; nbsp;＆lt; / td＆gt;＆lt; td＆gt; HTML＆lt; / td＆gt;＆lt; / tr＆gt;＆lt; / table＆gt;“＆gt;

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

  

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>

Answer 2

我创建了一个你提到的小提琴的新分支并实现了你的组件： 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运行它的代码。

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