Question :
I have the following problem:
I’m getting the value of date-img when I hover in the .gettoll class, but I need to replace that value here content: "<img src='IMAGEM AQUI'>",
when hovering over each of the items, the problem is that everyone is displaying the same image.
NOTE:
li's
is withinwhile()
using a carousel I
I simplified it to put here …
Would anyone have any idea how to solve the problem?
JS
<script>
$(document).ready(function() {
$(".gettool").hover(function(){
var imagetooltip = $(this).data("img");
console.log(imagetooltip);
});
$(".tooltip").tooltipster({
animation: "grow",
contentAsHTML: true,
content: "<img src='IMAGEM AQUI'>",
multiple: true
});
});
</script>
HTML
<ul>
<li><a href="#" class="gettool tooltip" data-img="images/qualquer.jpg"><img src="images/01.jpg"></a></li>
<li><a href="#" class="gettool tooltip" data-img="images/qualquer.jpg"><img src="images/01.jpg"></a></li>
<li><a href="#" class="gettool tooltip"data-img="images/qualquer.jpg"><img src="images/01.jpg"></a></li>
</ul>
Answer :
Take a look here at the methods of this plugin .
What you are missing is:
var novaImagen = '<img src="' + imagetooltip + '" />'
$(this).tooltipster('content', novaImagen)
$(this).tooltipster('show');
Unformatted example = > link
Use the $(this).attr("data-img")
selector instead of $(this).data("img");
Call the tooltip inside where you call the hover function and in place of the ‘IMAGE HERE place the variable that has the date value img. This should resolve.
$(".gettool").hover(function(){
var imagetooltip = $(this).attr("data-img");
$(this).find('img').attr('src', imagetooltip);
});
I’m doing it now:
$(document).ready(function(){
$('.tooltip').hover(function(){
var imagetooltip = $(this).attr('data-img');
$('.tooltip').tooltipster({
content: $(this).find('img').attr('src', imagetooltip),
multiple: true
});
});
});
but the tooltip always brings the image of the previous link in relation to what I did .hover ()