时间戳

首页 > 解决方案 > 如何使用 utext 悬停表格

html - 如何使用 utext 悬停表格

问题描述

我对百里香有utext疑问。我想将表格显示为悬停。

这是我的代码

<td class="CellWithHtmlContent" th:title="${event.note}">
                <span class="CellContent" ></span>
                <span th:if="${event.note != null}"
                      th:utext="${!#strings.startsWith(event.note,'<') ? #strings.abbreviate(event.note, 60) : 'More'}"></span>
            </td>

我曾经th:title在悬停时显示表格。但它只显示html代码。使用th:utext, 可以正确显示表格。但它不是作为悬停。有什么方法可以th:utext在里面使用th:title吗？

像这样 -->th:title = utext(${event.note})

标签： htmlthymeleaf

解决方案

Thymeleaf 不支持这一点。不可能让浏览器在title属性中呈现 HTML。请参阅是否可以在标题属性中添加 html？

您将需要使用类似https://atomiks.github.io/tippyjs/的东西

将此 JavaScript 片段添加到您的页面：

<script>
        document.addEventListener('DOMContentLoaded', function (event) {

            tippy('.tooltip', {
                content(reference) {
                    const id = reference.getAttribute('data-tooltipid');
                    const template = document.getElementById(id);
                    return template.innerHTML;
                },
                allowHTML: true
            });
        });
</script>

现在，添加如下内容：

<td class="CellWithHtmlContent" th:title="${event.note}">
                <span class="CellContent" ></span>
                <span th:if="${event.note != null}"
                      th:attr="data-tooltipid=${'cell-tooltip-'+event.id}"></span>
            </td>

（我假设event有一个id。您将需要一些东西来使当前页面上每个工具提示的工具提示引用唯一）。

现在，页面上还有一些隐藏的 HTML，它们将由 Tippy 库加载到工具提示中：

<div th:id="${'cell-tooltip-'+event.id}" class="hidden">
  <span th:if="${event.note != null}"
                      th:utext="${!#strings.startsWith(event.note,'<') ? #strings.abbreviate(event.note, 60) : 'More'}"></span>
</div>

id隐藏的 HTML 的 与data-tooltipid工具提示的匹配很重要。

推荐阅读