twitter-bootstrap - Thymeleaf - 在工具提示上获取动态内容

Question

我是 Thymeleaf 的新手，我的任务是添加带有动态内容的工具提示。如果我使用titleordata-original-title属性，我可以在工具提示中插入一个 HTML 标记，但变量值没有呈现。如果我使用该th:title属性，我可以获得所需的变量值，但它不是 HTML 标记。

有什么建议吗？

<div data-toggle="tooltip" data-placement="bottom" title="<div class='row' style='color: white; background-color: black; border-radius: 10px'>
    <div class='col-sm-6' style='margin:10px 2px;'>
        <div class='text-left' th:text='${sku.name}'>name:</div>
        <div class='text-left' th:text='${sku.price}'>name:</div>
    </div>
</div>"                                             
data-html="true" th:text="${sku.name}"></div>

标签： twitter-bootstrapdynamictooltipthymeleaf

Answer 1

更新

您必须使用th:title来处理变量。您的代码中基本上有两个问题：

1. 您必须对标签进行编码，例如：

   < becomes &lt;

   > becomes >

2. 您必须将 HTML 标记放在引号内，并与引号外的变量连接起来，例如：

   th:title="'<div>' + ${sku.name} + '</div>'" data-html="true"

请注意，您的 HTML 标记越复杂，处理所有编码就越困难。我建议您简化标签并逐步增加复杂性。