Thymeleaf中如何使用utext实现表格内容悬浮展示效果

原生HTML的title属性仅支持纯文本内容，无法解析渲染HTML标签，因此不存在th:title = utext(${event.note})这类用法，即使强行写入HTML内容也只会展示原始源码，无法达到渲染效果。

你可以通过自定义CSS悬浮提示框实现需求，具体改造如下：

1. 修改HTML结构 #

在原有td标签内新增隐藏的悬浮内容容器，用th:utext渲染完整的HTML内容：

<td class="CellWithHtmlContent">
    <span class="CellContent" ></span>
    <span th:if="${event.note != null}"
          th:utext="${!#strings.startsWith(event.note,'<') ? #strings.abbreviate(event.note, 60) : 'More'}"></span>
    <!-- 新增悬浮提示内容容器 -->
    <div class="custom-tooltip" th:utext="${event.note}"></div>
</td>

2. 新增对应CSS样式 #

通过CSS控制悬浮时显示提示框，可根据需求自行调整样式参数：

/* 父容器设置相对定位，作为提示框的定位参照 */
.CellWithHtmlContent {
    position: relative;
}
/* 默认隐藏提示框 */
.custom-tooltip {
    display: none;
    position: absolute;
    z-index: 999;
    top: 100%;
    left: 0;
    padding: 8px 12px;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    min-width: 200px;
}
/* 父容器悬浮时展示提示框 */
.CellWithHtmlContent:hover .custom-tooltip {
    display: block;
}

如果需要更复杂的交互效果（比如延迟显示/消失、自动调整定位），可以基于项目已引入的前端UI库的Tooltip组件实现，将th:utext渲染后的内容传入组件的内容插槽即可。

内容的提问来源于stack exchange，提问作者Dulani Maheshi