How to hover the table using utext - html

Question

I have an issue with utext in thymeleaf. I want to show a table as a hover.
This is my code
<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>
I have used th:title to show the table when hovering. But it just show the html code. Using th:utext, can show the table properly. but It isn't act as a hover. Is there any way to use th:utext inside the th:title?
Like this --> th:title = utext(${event.note})

Answer 1

Thymeleaf does not support this. It is not possible to have a browser render HTML in a title attribute. See Is it possible to add html inside a title attribute?
You will need to use something like https://atomiks.github.io/tippyjs/
Add this JavaScript snippet to your page:
<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>
Now, add something like this:
<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>
(I assumed event has an id. You will need something to make the tooltip reference unique for each tooltip on the current page).
Now, also have some hidden HTML on the page that will be loaded into the tooltip by the Tippy library:
<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>
It is important that the id of the hidden HTML matches with the data-tooltipid for the tooltip to work.