creating a javascript tooltip for an html with Thymeleaf

Asked

Viewed 158 times

2

I have the following div which shows the date of a message within a table: 

    <div class="data" th:text="${aviso.data}"></div>

I need to put a tooltip that shows the date as well when I hover the mouse over that data element, but I can’t do this by html using the title tool because of Thymeleaf. I’m trying to do javascript to give an event onmouseover() but I can’t select the element since the property . getElementByClass will return me an array and not separate values to display individually in the tooltip. Any suggestions?

javascript thymeleaf

  • This answer shows how to make a super well crafted tooltip only with [tag:css]. I think for you it will come out like a glove.

  • Did you solve it? The answer didn’t help? What was the difficulty?

  • This solution actually only shows a more "tidy" tooltip, because it still makes use of <title> and the problem is that I can’t capture the value of . date inside this tag because of the use of Thymeleaf.

1 answer

1


I’m trying to do by javascript to give an event onmouseover() but I cannot select the element since the property .getElementByClass will return me an array and not separate values to show individually in tooltip.

You can solve this by creating an event for each element, and so pick each text separately with the mouseover and put in tooltip:

var els = document.body.querySelectorAll(".data");

for(var x=0; x<els.length; x++){
   els[x].addEventListener("mouseover", function(){
      // pega o texto da div
      var texto = this.textContent;
      console.log(texto);
   });
}
Passe o mouse sobre as divs abaixo:
<br>
<div class="data">data 1</div>
<div class="data">data 2</div>
<div class="data">data 3</div>

  • I managed to make your code work by placing it inside a DOM I created for the page, it usually shows on the console the date when I pass the mouse over. the question now is, how to open a tooltip with these values? using (text). tooltip(); me returns the text error.tooltip is not a Function at Htmldivelement.<Anonymous>

  • 1

    The texto would be just the text that is in the element. You have to see how this method works .tooltip(), how to assign a text to it.

Browser other questions tagged javascript thymeleaf

You are not signed in. Login or sign up in order to post.