creating a tooltip in javascript for an html with thymeleaf

Question

creating a tooltip in javascript for an html with thymeleaf

Navigation

#1 by (1 votes)

2

I have the following div that shows the date of a message inside a table:

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

I need to put a tooltip that shows the date also when I hover over this date element, but I can not do this by html using the title tool on thymeleaf's account. I'm trying to do by javascript to give an onmouseover () event but I can not select the element since the .getElementByClass property will return me an array and not separate values to display individually in the tooltip. Any suggestions?

javascript thymeleaf

asked by anonymous 04.05.2018 / 21:06

1 answer

How to get the length of a video formatted in Html5? [duplicate] VB-NET Click an element (click on itself) enabled false, to be enabled true

score 1 · Accepted Answer

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

You can solve this by creating an event for each element, and then take each text separately with mouseover and put it in the 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>