字符串中带有 HTML 的引导工具提示答案

【问题标题】：Bootstrap tooltip with HTML in a string字符串中带有 HTML 的引导工具提示
【发布时间】：2020-12-02 10:44:04
【问题描述】：

我正在尝试将表格附加到我创建的 div 中。在此表中，我想添加一个带有一些 HTML 和 css 类的引导工具提示。这样做时，我的输出总是返回我的 HTML 作为文本显示。我在尝试创建我正在寻找的输出时遇到问题。

在将 HTML 添加到引导工具提示时，您可以在字符串中这样做吗？

这是我的代码示例：

 $('[data-toggle="tooltip"]').tooltip()
 
 
 let html = ""
 
html += '<a data-toggle="tooltip" data-html="true" data-placement="left" title="<div class="row"><p>hello world</p></div>"> Test HTML </a >';

 $("#tooltipData").html(html);

.row {
  color:red;
}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div id='tooltipData'>
</div>

<br/> 
<br/>

<a data-toggle="tooltip" data-html="true" data-placement="left" title="<div class='row'>hello world</div>"> Test HTML </a >

第一个 div tooltipData 是我遇到的问题的一个示例。

第二个<a> 数据是工具提示按预期工作的示例，但我无法从第一个示例tooltipData 中获得相同的结果。

我的预期结果是追加到 div 并具有与 <a data-toggle="tooltip" data-html="true" data-placement="left" title="<div class='row'><p>hello world</p> </div>" Test </a > 相同的输出

我希望将鼠标悬停在第一个“测试 HTML”上，并将工具提示读取为 hello world 作为第二个。

【问题讨论】：

标签： javascript html jquery css

【解决方案1】：

是的，您可以使用\' 来引用该行。但是你还必须确保 $('[data-toggle="tooltip"]').tooltip() 在你在 js 中添加 html 代码后呈现。见这里：

let html = ""
 
html += '<a data-toggle="tooltip" data-html="true" data-placement="left" title="<div class=\'row\' >ok</div>"> Test HTML </a >';

 $("#tooltipData").html(html);
 
 $('[data-toggle="tooltip"]').tooltip()

.row {
  color:red;
}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div id='tooltipData'>
</div>



<a data-toggle="tooltip" data-html="true" data-placement="left" title="<div class='row'>ok</div>"> Test HTML </a >

【讨论】：