3

Estou com o seguinte problema:

Estou obtendo o valor de data-img quando faço hover na classe .gettoll, mas eu preciso substituir esse valor aqui content: "<img src='IMAGEM AQUI'>", quando passar o mouse em cada um dos itens, o problema é que todos estão exibindo a mesma imagem.

OBS: as li's estão dentro de um while() usando um carousel eu simplifiquei pra colocar aqui...

Alguém teria alguma ideia de como resolver o problema ?

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>

4 Respostas 4

1

Dê uma olhada aqui nos métodos desse plugin.

O que lhe está a faltar é:

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

Exemplo sem formatação => http://jsfiddle.net/tVsXY/

1
  • Perfeito! muito obrigado resolveu exatamente o problema. 8/05/2014 às 13:34
1

Utilize o seletor $(this).attr("data-img") ao invés de $(this).data("img");

1
  • Leandro, já testei essa possibilidade anteriormente e o problema continua na mesma. 30/04/2014 às 18:33
1

Chame a tooltip dentro de onde você chama a função de hover e no lugar da 'IMAGEM AQUI coloque a variável que tem o valor do data img. Isso deve resolver.

5
  • quase lá, mas agora quando passo o mouse ele exibe 11 links da mesma imagem e sempre a ultima é a mesma, ou seja ele está abrindo todas por debaixo 30/04/2014 às 19:33
  • Chama o tooltip só com o parâmetro de content pra ver. Não faz sentido ele trazer 11 links.
    – dsantoro
    30/04/2014 às 20:09
  • estou tentando só com o parâmetro content abre uma vez só mas o console ainda mostra varios links repetidos content: "imagetooltip" <- não imprime a url 30/04/2014 às 20:20
  • Você está concatenando? Deveria ficar: content: "<img src='+ imagetooltip +'>";
    – dsantoro
    30/04/2014 às 20:22
  • Já havia tentado concatenado também e persiste o mesmo resultado 2/05/2014 às 12:47
1
$(".gettool").hover(function(){
    var imagetooltip = $(this).attr("data-img");
    $(this).find('img').attr('src', imagetooltip);
});

Estou fazendo assim agora:

$(document).ready(function(){
    $('.tooltip').hover(function(){
        var imagetooltip = $(this).attr('data-img');

        $('.tooltip').tooltipster({
            content: $(this).find('img').attr('src', imagetooltip),
            multiple: true
        });
    });
});

mas o tooltip sempre trás a imagem do link anterior em relação ao que eu fiz o .hover()

3
  • Para uma resposta mais completa explique sua solução. Isso vai ajudar pessoas que verem essa pergunta no futuro a entender as várias soluções propostas e a diferença ou semelhança entre elas. Para entender melhor como responder dê uma lida na Centra de Ajuda 1/05/2014 às 20:37
  • Chegamos mais perto, porém não consigo imprimir ainda a imagem dentro do tooltip, mas fora do tooltip sim 2/05/2014 às 13:48
  • $(document).ready(function(){ $('.gettool').hover(function(){ var imagetooltip = $(this).attr('data-img'); //$(this).find('img').attr('src', imagetooltip); $('.tooltip').tooltipster({ content: '<img src="+imagetooltip+">', multiple: true }); }); }); 2/05/2014 às 13:49

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 .