Question

我有这样的HTML：

<i class="fa fa-cubes" data-toggle="tooltip" data-html="true" data-placement="top" title="{% for product in products.category.all %} {{product.description}} x {{product.quantity}} &#013;{% endfor %}"></i></td>

因此，这样做对于该类别中的每个产品，它都会显示产品名称和悬停时的产品数量。例如：

Product 1 x 25

所以，我希望能够做的是，下一个产品，应该是这样的新行：

Product 1 x 25
Product 2 X 43

相反，我得到了这个：Product 1 X 25 Product 2 X43

我在Stackoverflow上查看了许多其他答案，我尝试了这些：

添加data-html=true并使用<br>分隔句子
使用
添加以下CSS：

.tooltip-inner { 空白：预缠绕; 最小宽度：100px; }

但这些方法都没有奏效。我错过了什么？

Answer 1

使用
作为插入新行的序列。这对所有浏览器都有帮助 - Chrome，Firefox，IE都有自己的优化。

Answer 2

我遇到了这个问题，并通过使用换行符（<br/>）并将其包含在<pre>标记中来解决了该问题。确保data-html属性设置为true。

我的设置如下。我正在动态更新标题。

我的div和初始标题：

<div id="example_div" data-toggle="tooltip" title="Loading..."  data-html="true">

我在onchange事件上调用的函数：

function populateToolTips(outcomeData)
{
    let Txt = `<pre>Line 1 value: ${outcome.first}<br/>Line 2 value: ${outcome.second}</pre>`;

    $("#example_div").attr('title', Txt).tooltip('fixTitle');
}

将鼠标悬停在div上时，最终结果如下所示：

Line 1 value: 123.45
Line 2 value: 678.90

如何在引导工具提示中将文本添加到换行符？

2 个答案: