Get date-img value

Question

I have the following problem:

I am getting the value of data-img when I do Hover in class . gettoll, but I need to replace this value here content: "<img src='IMAGEM AQUI'>", when hovering over each of the items, the problem is that they are all displaying the same image.

OBS: as li's are within a while() using a Carousel I I simplified 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 1

Take a look here at us methods of this plugin.

What he’s missing is:

    var novaImagen = '<img src="' + imagetooltip + '" />'
    $(this).tooltipster('content', novaImagen)
    $(this).tooltipster('show');

Example without formatting => http://jsfiddle.net/tVsXY/

Answer 2

Use the selector switch $(this).attr("data-img") instead of $(this).data("img");

Answer 3

Call the tooltip inside where you call the function of Hover and in place of the 'IMAGE HERE put the variable that has the value of the data img. That should solve.

Answer 4

$(".gettool").hover(function(){
    var imagetooltip = $(this).attr("data-img");
    $(this).find('img').attr('src', imagetooltip);
});

I’m doing like this 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()