2

Tenho a seguinte div que mostra a data de uma mensagem dentro de uma tabela:

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

Preciso colocar uma tooltip que mostre a data tambem quando eu passar o mouse em cima desse elemento data, mas não consigo fazer isso por html usando a ferramenta title por conta do thymeleaf. Estou tentando fazer por javascript para dar um evento onmouseover() mas não consigo selecionar o elemento já que a propriedade .getElementByClass vai me retornar um array e não valores separados pra mostrar individualmente no tooltip. Alguma sugestão?

3
  • Esta resposta mostra como fazer um tooltip super bem elaborado somente com css. Acho que pra você vai sair como uma luva. 4/05/2018 às 19:17
  • Conseguiu resolver? A resposta não ajudou? Qual a dificuldade?
    – Sam
    7/05/2018 às 6:09
  • Essa solução na verdade só mostra um tooltip mais "arrumado", porque ainda faz o uso do <title> e o problema é que não consigo capturar o valor da .data pra dentro dessa tag por conta do uso do thymeleaf. 7/05/2018 às 17:38

1 Resposta 1

1

Estou tentando fazer por javascript para dar um evento onmouseover() mas não consigo selecionar o elemento já que a propriedade .getElementByClass vai me retornar um array e não valores separados pra mostrar individualmente no tooltip.

Você pode resolver isso criando um evento para cada elemento, e assim pegar cada texto separadamente com o mouseover e colocar no 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>

2
  • Consegui fazer seu codigo funcionar colocando ele dentro de um DOM que criei pra pagina, ele mostra normalmente no console a data quando eu passo o mouse por cima. a questao agora é, como abrir um tooltip com esses valores? usando (texto).tooltip(); me retorna o erro texto.tooltip is not a function at HTMLDivElement.<anonymous> 7/05/2018 às 17:53
  • 1
    O texto seria apenas o texto que está no elemento. Tem que ver como funciona esse método .tooltip(), como se atribui um texto a ele.
    – Sam
    7/05/2018 às 18:28

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .