Thymeleaf - получить динамический контент во всплывающей подсказке - PullRequest
Новая
       21

Thymeleaf - получить динамический контент во всплывающей подсказке

0 голосов
/ 27 июня 2019

Я новичок в 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>

Ответы [ 2 ]

1 голос
/ 27 июня 2019

Обновлено

Вы должны использовать th: title для обработки переменных. Проблема в вашем коде в основном две:

  1. Вы должны закодировать свои теги, например:

    < becomes &lt;

    > becomes %gt;

  2. Вы должны поместить свои html-теги в кавычки, соединяясь с вашей переменной вне кавычек, например:

    th:title="'&lt;div&gt;' + ${sku.name} + '&lt;/div&gt;'" data-html="true"

Обратите внимание, что чем сложнее ваши HTML-теги, тем сложнее будет обрабатывать всю кодировку. Я предлагаю вам упростить ваши теги и увеличить сложную деталь по частям.

0 голосов
/ 28 июня 2019

Спасибо @Guilherme за ответ.
Однако я не могу добавить html-тег внутрь th: attr.это будет работать, когда я использую 

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 >"
...