Question

我是Thymeleaf的新手，我的任务是添加包含动态内容的工具提示。如果我使用title或data-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>

Answer 1

已更新

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

您必须对代码进行编码，例如：

< becomes <

> becomes %gt;
您必须将html标记放在引号内，并将变量与引号之外的变量连接起来，例如：

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

请注意，您的html标签非常复杂，处理所有编码将更加困难。建议您简化标签，并逐步增加复杂的部分。

Answer 2

感谢@Guilherme的回复。
但是，我不能在th：attr内添加html标签。当我使用

时它将起作用

th:attr="data-title=${sku.name}"

但是如果我使用

th:attr="data-title=<div>${sku.name}</div>"

然后我得到了例外：

org.thymeleaf.exceptions.TemplateProcessingException: Could not parse as assignation sequence: "data-title=< div >${sku.name}< /div >"

Answer 3

截至今天，我正在使用Thymeleaf 3.0.11和Spring Boot 2.3.3。没有答案对我有用。

我一直在Thymeleaf中寻找html的title="something"替代品。

以下是我的窍门：

<div th:if="not ${case.lockedby eq null}">
<span class="text-danger" th:attr="title=${case.lockedby}" ><i class="fas fa-user-lock"></i></span>
</div>

要回答原始问题（如果我理解清楚），这就是我们所需要的：

th:attr="title=${sku.name}"

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

3 个答案: