Get date-img value

Posted on

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 within while() 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 ()

    

Leave a Reply

Your email address will not be published. Required fields are marked *