Using a fragment as a Thymeleaf variable to th:with and a th:data-content attribute

Question

I'm looking to do something like the following. Is this possible or is there a workaround?

myFragment.html

<div th:fragment="myContent(someObject)">
  Some popover strings with some business logic
  <span th:text="${someObject.property}">[object property]</span>
</div>

myTemplate.html

<!-- how would I correct this so that the fragment is evaluated? -->
<div th:with="popoverContent = ${myFragment :: myContent(someObject)}">    
    <a th:data-content="${popoverContent}"></a>
</div>

Can I insert a fragment within a th:with as a variable? I can create popoverContent server-side, but I'm thinking there's likely a better way.

Update: More Specifics on Use Case

I need tooltips with some basic math formulas to be styled.

In myFragment.html, I have an HTML table with multiple th:cases in a th:switch. Each td has a tooltip with the calculated values.

The tooltip reads something like, "Here is how we calculate your custom ratio: ((1 + 5) / 3) + 1 = 3", so we'd style it to be read more clearly.

It would be messy to do it server-side, and the best alternative right now is that I avoid using a th:fragment and supply the logic in each th:data-content field directly in each th:case.

It seems like a small thing, but it's surprisingly been somewhat of a headache since the calculations can sometimes change, and so modifying multiple places is error-prone and a chore. And we do this same sort of thing overall in multiple places.

Answer 1

I don't know of any way to get a fragment as text, but here is one way you could do it with jquery:

<!-- onload -->
<script>
    $(function() {
        $('#dest').attr('data-content', $('#source').html());
    });
</script>

And the html would look something like:

<div id="dest"></div>
<div id="source" style="display: none;" th:insert="~{popover :: popover}" />

After doing rendering and inspecting the html in Chrome's developer tools I can see:

<div id="dest" data-content="<div>Hello, I am a popover</div>"></div>
<div id="source" style="display: none;"><div>Hello, I am a popover</div></div>

Answer 2

You can add template using ~{} instead of ${} as specified in the first comment. The reason your someObject is not evaluated IMO is you are not using variable type expression i.e. ${someObject}

Overall you should do something like below:

myFragment.html

<div th:fragment="myContent(someObject)">
    Some popover strings with some business logic
    <span th:text="${someObject.property}">[object property]</span>
</div>

myTemplate.html

<div th:with="popoverContent = ~{myFragment :: myContent(${someObject})}">
    <th:block th:insert="${popoverContent}"></th:block>
</div>