Efeito tooltip em imagens

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Atendido / Resolvido Efeito tooltip em imagens

Mensagem por Lobs em 19.02.19 22:51

Detalhes da questão


Endereço do fórum: https://www.forumnsanimes.com
Versão do fórum: ModernBB

Descrição


Olá. Estou precisando de um código rápido para ativar tooltip (ao mouse hover) em imagens.

https://ajuda.forumeiros.com/t80634-tutorial-tooltip-no-forum

Vocês já fizeram vários tutoriais sobre e responderam vários usuários sobre o assunto, mas não achei ninguém que quisesse colocar um tooltip específico em uma imagem específica.

Lembrando que as imagens são de um campo de perfil, uma zona de texto. Eu consigo adicionar class nas imagens através de um exploit que eu achei no BB Code, mas não sei como fazer para associar uma tooltip específica a uma class.

Lembrando que essa tooltip precisa ter conteúdo editável e estilizável através de CSS. (Eu quero poder escolher o que vai ficar escrito quando o mouse passar em cima da imagem, e também qual vai ser a cor da fonte, do fundo da tooltip)...

Eu tentei algumas coisas utilizando exploits, mas não ficou nada prático. Um exemplo do que eu quero está aqui, só que com imagens ao invés de texto:

https://www.w3schools.com/css/css_tooltip.asp (vejam a demo)
Lobs

Lobs
Nível 5

Masculino
Inscrito dia : 02/06/2013
Mensagens : 57
Pontos Ativos : 87

Ver perfil do usuário http://nsanimes.forumeiro.net/

Atendido / Resolvido Re: Efeito tooltip em imagens

Mensagem por Pedxz em 20.02.19 12:57

Olá @Lobs,
o senhor quer algum semelhante a: Questão Resolvida . Se sim, diga-me para compatibilizar!


Aguardo uma resposta sua,
pedxz.
Pedxz

Pedxz
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 13/01/2017
Mensagens : 2809
Pontos Ativos : 3561

Ver perfil do usuário https://pedxz.forumeiros.com

Atendido / Resolvido Re: Efeito tooltip em imagens

Mensagem por Lobs em 20.02.19 19:11

@Pedxz escreveu:Olá @Lobs,
o senhor quer algum semelhante a: Questão Resolvida . Se sim, diga-me para compatibilizar!


Aguardo uma resposta sua,
pedxz.

O estilo da tooltip ficou legal! Gostei do estilo, pode ser com esse. Mas tem que pegar no perfil dos membros (não só nos tópicos), e eu preciso poder editar o conteúdo da toolbox (como colocar negrito em alguma palavra, itálico, cor diferente em alguma letra, essas coisinhas)
Lobs

Lobs
Nível 5

Masculino
Inscrito dia : 02/06/2013
Mensagens : 57
Pontos Ativos : 87

Ver perfil do usuário http://nsanimes.forumeiro.net/

Atendido / Resolvido Re: Efeito tooltip em imagens

Mensagem por Lobs em 21.02.19 19:11

Passando pra dar aquele up no tópico! o/
Lobs

Lobs
Nível 5

Masculino
Inscrito dia : 02/06/2013
Mensagens : 57
Pontos Ativos : 87

Ver perfil do usuário http://nsanimes.forumeiro.net/

Atendido / Resolvido Re: Efeito tooltip em imagens

Mensagem por Lobs em 22.02.19 19:40

Dando mais um up aqui..
Lobs

Lobs
Nível 5

Masculino
Inscrito dia : 02/06/2013
Mensagens : 57
Pontos Ativos : 87

Ver perfil do usuário http://nsanimes.forumeiro.net/

Atendido / Resolvido Re: Efeito tooltip em imagens

Mensagem por Roger123 em 23.02.19 18:13

Olá @Lobs
Nâo entendi a 100% a sua questão... Veja se é isto que quer.
Crie um JavaScript com o investimento em todas as páginas.
Código:
        $(function() {          var lista_de_medallas = [            'https://i.servimg.com/u/f62/12/23/10/57/blue11.png', //Medalla 1            'https://i.servimg.com/u/f62/12/23/10/57/dark_g11.png',  // Medalla 2            'https://i.servimg.com/u/f62/12/23/10/57/gree11.png', // Medalla 3            'https://i.servimg.com/u/f62/12/23/10/57/orange12.png', // Medalla 4            'https://i.servimg.com/u/f62/12/23/10/57/perp12.png', // Medalla 5            'https://i.servimg.com/u/f62/12/23/10/57/red10.png', // Medalla 6                     ];                   var titulo_medallas = [                       'Alcanzaste los 100 Posts',                  // Medalla 1            'Alcanzaste los 200 Posts',                  // Medalla 2            'Alcanzaste los 500 Posts',                  // Medalla 3            'Alcanzaste los 5000 Posts',                 // Medalla 4            'Obtuviste 100 Me Gusta',                  // Medalla 5            'Compraste 10 o Más Objetos en la Tienda', // Medalla 6                     ];                   $('.postprofile .scrollable-zone img').each(function() {            var a = lista_de_medallas.indexOf( $(this).attr('src') );            $(this).attr('title', titulo_medallas[a]);          });        });

Neste caso, deve personalizar onde tem o link para a respetiva imagem!
Depois, basta colocar a descrição das imagens, respetivamente.

Cordialmente,
Roger123


Seja bem-vindo ao Fórum dos Fóruns!
Veja aqui alguns links importantes a saber:



Roger123 - Ajudeiro

Efeito tooltip em imagens Pmb0kx10
Roger123

Roger123
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 30/06/2018
Mensagens : 1423
Pontos Ativos : 1711

Ver perfil do usuário https://ajuda.forumeiros.com

Atendido / Resolvido Re: Efeito tooltip em imagens

Mensagem por Lobs em 23.02.19 22:43

@Roger123 escreveu:Olá @Lobs
Nâo entendi a 100% a sua questão... Veja se é isto que quer.
Crie um JavaScript com o investimento em todas as páginas.
Código:
        $(function() {          var lista_de_medallas = [            'https://i.servimg.com/u/f62/12/23/10/57/blue11.png', //Medalla 1            'https://i.servimg.com/u/f62/12/23/10/57/dark_g11.png',  // Medalla 2            'https://i.servimg.com/u/f62/12/23/10/57/gree11.png', // Medalla 3            'https://i.servimg.com/u/f62/12/23/10/57/orange12.png', // Medalla 4            'https://i.servimg.com/u/f62/12/23/10/57/perp12.png', // Medalla 5            'https://i.servimg.com/u/f62/12/23/10/57/red10.png', // Medalla 6                     ];                   var titulo_medallas = [                       'Alcanzaste los 100 Posts',                  // Medalla 1            'Alcanzaste los 200 Posts',                  // Medalla 2            'Alcanzaste los 500 Posts',                  // Medalla 3            'Alcanzaste los 5000 Posts',                 // Medalla 4            'Obtuviste 100 Me Gusta',                  // Medalla 5            'Compraste 10 o Más Objetos en la Tienda', // Medalla 6                     ];                   $('.postprofile .scrollable-zone img').each(function() {            var a = lista_de_medallas.indexOf( $(this).attr('src') );            $(this).attr('title', titulo_medallas[a]);          });        });

Neste caso, deve personalizar onde tem o link para a respetiva imagem!
Depois, basta colocar a descrição das imagens, respetivamente.

Cordialmente,
Roger123

Show!

Mas como eu posso estilizar a tooltip com CSS (como eu disse no tópico)?

Por exemplo, colocar um fundo preto com a fonte branca... usar html no conteúdo da tooltip (por exemplo, aparecer assim "Este usuário marcou <i><b>20 mensagens</b></i>" quando eu colocar o mouse em cima da imagem)
Lobs

Lobs
Nível 5

Masculino
Inscrito dia : 02/06/2013
Mensagens : 57
Pontos Ativos : 87

Ver perfil do usuário http://nsanimes.forumeiro.net/

Atendido / Resolvido Re: Efeito tooltip em imagens

Mensagem por Lobs em 25.02.19 2:44

Up! Vai fazer uma semana que a dúvida foi aberta Tonto
Lobs

Lobs
Nível 5

Masculino
Inscrito dia : 02/06/2013
Mensagens : 57
Pontos Ativos : 87

Ver perfil do usuário http://nsanimes.forumeiro.net/

Atendido / Resolvido Re: Efeito tooltip em imagens

Mensagem por Hancki em 25.02.19 21:13

@Lobs escreveu:Up! Vai fazer uma semana que a dúvida foi aberta Tonto
Olá!

Preciso de saber exatamente quais códigos está a usar para este efeito. Só assim conseguirei indicar qual o sítio que pode alterar qualquer característica visual.

Hancki
Hancki

Hancki
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 03/10/2009
Mensagens : 8113
Pontos Ativos : 12117

Ver perfil do usuário https://ajuda.forumeiros.com/

Atendido / Resolvido Re: Efeito tooltip em imagens

Mensagem por Lobs em 26.02.19 0:58

@Hancki escreveu:
@Lobs escreveu:Up! Vai fazer uma semana que a dúvida foi aberta Tonto
Olá!

Preciso de saber exatamente quais códigos está a usar para este efeito. Só assim conseguirei indicar qual o sítio que pode alterar qualquer característica visual.

Hancki

Não estou usando nenhum código. Na verdade, eu estou precisando de um código que dê esse efeito! :/

É simples: Tenho um campo de perfil (uma zona de texto, que não aceita html), e tem uma imagem nesse campo de perfil. Quando eu passar o mouse em cima dela, quero que apareça uma tooltip escrito "Membro do Mês!.

Desse jeito aqui:
Efeito tooltip em imagens 5Ymov

E claro, quero poder mudar a cor da fonte e fundo da tooltip.
Lobs

Lobs
Nível 5

Masculino
Inscrito dia : 02/06/2013
Mensagens : 57
Pontos Ativos : 87

Ver perfil do usuário http://nsanimes.forumeiro.net/

Atendido / Resolvido Re: Efeito tooltip em imagens

Mensagem por Klanxi em 26.02.19 17:17

Boa tarde,

Diz aqui algo muito simples para entender o que você necessita.

Deseja isto, certo?

http://prntscr.com/mqggdt

Abraço!
Klanxi

Klanxi
Nível 4

Masculino
Inscrito dia : 30/08/2018
Mensagens : 26
Pontos Ativos : 40

Ver perfil do usuário https://ajuda.forumeiros.com/

Atendido / Resolvido Re: Efeito tooltip em imagens

Mensagem por Lobs em 26.02.19 22:07

@Klanxi escreveu:Boa tarde,

Diz aqui algo muito simples para entender o que você necessita.

Deseja isto, certo?

http://prntscr.com/mqggdt

Abraço!

Exatamente!! Só que em imagens!

E tem que funcionar nos campos de perfil (zona de texto).
Lobs

Lobs
Nível 5

Masculino
Inscrito dia : 02/06/2013
Mensagens : 57
Pontos Ativos : 87

Ver perfil do usuário http://nsanimes.forumeiro.net/

Atendido / Resolvido Re: Efeito tooltip em imagens

Mensagem por Klanxi em 26.02.19 23:10

Olá,

Adicione o seguinte à sua Folha de Estilo CSS:
Código:
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

Agora o que tem a fazer é usar as imagens da seguinte forma:
Código:
<div class="tooltip"><img src="https://i.servimg.com/u/f21/16/89/96/68/chrome10.png"/>
  <span class="tooltiptext">Klanxi</span>
</div>

Onde diz Klanxi é onde aparecerá o texto em "hover" que você deseja.

Espero que seja isso que você deseje.

Cumprimentos,
Diogo Rocha
Klanxi

Klanxi
Nível 4

Masculino
Inscrito dia : 30/08/2018
Mensagens : 26
Pontos Ativos : 40

Ver perfil do usuário https://ajuda.forumeiros.com/

Atendido / Resolvido Re: Efeito tooltip em imagens

Mensagem por Lobs em 26.02.19 23:53

@Klanxi escreveu:Olá,

Adicione o seguinte à sua Folha de Estilo CSS:
Código:
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

Agora o que tem a fazer é usar as imagens da seguinte forma:
Código:
<div class="tooltip"><img src="https://i.servimg.com/u/f21/16/89/96/68/chrome10.png"/>
  <span class="tooltiptext">Klanxi</span>
</div>

Onde diz Klanxi é onde aparecerá o texto em "hover" que você deseja.

Espero que seja isso que você deseje.

Cumprimentos,
Diogo Rocha

Não funfa no campo de perfil xD
Lobs

Lobs
Nível 5

Masculino
Inscrito dia : 02/06/2013
Mensagens : 57
Pontos Ativos : 87

Ver perfil do usuário http://nsanimes.forumeiro.net/

Atendido / Resolvido Re: Efeito tooltip em imagens

Mensagem por Hancki em 27.02.19 18:23

Olá!

Crie uma nova página Javascript com investimento em todas as páginas:
Código:
$(document).ready(function() {
    // CSS
    $('head').append('<style>.tooltip {display: none; position: absolute; padding: 10px;color: #777; background-color: #fff; border: 1px solid #777; box-shadow: 0 1px 3px 1px rgba(0,0,0,0.5); border-radius: 3px;}</style>');
    // FIM CSS
    $('#field_id13 dd').hover(function(e) { // PARTE PARA ESCOLHER O ELEMENTO EM HOVER
        var titleText = 'Texto a gosto!'; // COLOCAR TEXTO A GOSTO, CONSIDERANDO ESTAR SEMPRE ENTRE ASPAS
        $('<p class="tooltip"></p>').text(titleText).appendTo('body').css('top', (e.pageY - 10) + 'px').css('left', (e.pageX + 20) + 'px').fadeIn('slow');
    }, function() {
        $(this).attr('title', $(this).data('tiptext'));
        $('.tooltip').remove();
    }).mousemove(function(e) {
        $('.tooltip').css('top', (e.pageY - 10) + 'px').css('left', (e.pageX + 20) + 'px');
    });
});

O resultado será este: http://prntscr.com/mqzg45

Ou seja, esta opção vai seguir o cursor de uma forma mais dinâmica. O visual podemos mudar com o CSS depois, mas a função está lá. Coloquei apenas a funcionar no campo de perfil de conquistas, para testar, mas podemos colocar em praticamente tudo. Não se esqueça de mudar o texto.

Hancki
Hancki

Hancki
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 03/10/2009
Mensagens : 8113
Pontos Ativos : 12117

Ver perfil do usuário https://ajuda.forumeiros.com/

Atendido / Resolvido Re: Efeito tooltip em imagens

Mensagem por Lobs em 27.02.19 21:26

@Hancki escreveu:Olá!

Crie uma nova página Javascript com investimento em todas as páginas:
Código:
$(document).ready(function() {
    // CSS
    $('head').append('<style>.tooltip {display: none; position: absolute; padding: 10px;color: #777; background-color: #fff; border: 1px solid #777; box-shadow: 0 1px 3px 1px rgba(0,0,0,0.5); border-radius: 3px;}</style>');
    // FIM CSS
    $('#field_id13 dd').hover(function(e) { // PARTE PARA ESCOLHER O ELEMENTO EM HOVER
        var titleText = 'Texto a gosto!'; // COLOCAR TEXTO A GOSTO, CONSIDERANDO ESTAR SEMPRE ENTRE ASPAS
        $('<p class="tooltip"></p>').text(titleText).appendTo('body').css('top', (e.pageY - 10) + 'px').css('left', (e.pageX + 20) + 'px').fadeIn('slow');
    }, function() {
        $(this).attr('title', $(this).data('tiptext'));
        $('.tooltip').remove();
    }).mousemove(function(e) {
        $('.tooltip').css('top', (e.pageY - 10) + 'px').css('left', (e.pageX + 20) + 'px');
    });
});

O resultado será este: http://prntscr.com/mqzg45

Ou seja, esta opção vai seguir o cursor de uma forma mais dinâmica. O visual podemos mudar com o CSS depois, mas a função está lá. Coloquei apenas a funcionar no campo de perfil de conquistas, para testar, mas podemos colocar em praticamente tudo. Não se esqueça de mudar o texto.

Hancki

Está ótimo! Só tem uma coisa:

Não está aparecendo nos tópicos! :/

O conteúdo desse campo de perfil aparece nos tópicos também, no entanto, lá a tooltip não aparece quando se coloca o mouse em cima da imagem.

O código que estou utilizando é esse:

Código:
$(document).ready(function() {
            // CSS
            $('head').append('<style>.tooltip {display: none; position: absolute; padding: 10px;color: #777; background-color: #fff; border: 1px solid #777; box-shadow: 0 1px 3px 1px rgba(0,0,0,0.5); border-radius: 3px;}</style>');
            // FIM CSS
            $('#tsukete').hover(function(e) { // PARTE PARA ESCOLHER O ELEMENTO EM HOVER
                var $htmlbadge = $('<strong>Rei Tsukete</strong> \
<br> \
<p>Cuidado com o Tsukete!</p>              ');
// COLOCAR TEXTO A GOSTO, CONSIDERANDO ESTAR SEMPRE ENTRE ASPAS
                $('<p class="tooltip"></p>').html($htmlbadge).appendTo('body').css('top', (e.pageY - 10) + 'px').css('left', (e.pageX + 20) + 'px').fadeIn('slow');
            }, function() {
                $(this).attr('title', $(this).data('tiptext'));
                $('.tooltip').remove();
            }).mousemove(function(e) {
                $('.tooltip').css('top', (e.pageY - 10) + 'px').css('left', (e.pageX + 20) + 'px');
            });
        });

O id da imagem é "tsukete"
Lobs

Lobs
Nível 5

Masculino
Inscrito dia : 02/06/2013
Mensagens : 57
Pontos Ativos : 87

Ver perfil do usuário http://nsanimes.forumeiro.net/

Atendido / Resolvido Re: Efeito tooltip em imagens

Mensagem por Hancki em 28.02.19 20:31

Olá!

Se você quer usar numa imagem, que tal usarmos o URL único dessa imagem como a variável principal em vez de usar um #ID? Atente na linha 5:
Código:
$(document).ready(function() {
    // CSS
    $('head').append('<style>.tooltip {display: none; position: absolute; padding: 10px;color: #777; background-color: #fff; border: 1px solid #777; box-shadow: 0 1px 3px 1px rgba(0,0,0,0.5); border-radius: 3px;}</style>');
    // FIM CSS
    var imgSrc = 'https://i.imgur.com/RdBABnX.png'; // COLOCAR LINK DA IMAGEM ENTRE AS ASPAS
    $('img[src="' + imgSrc + '"]').hover(function(e) { // PARTE PARA ESCOLHER O ELEMENTO EM HOVER
        var $htmlbadge = $('<strong>Rei Tsukete</strong> \<br> \<p>Cuidado com o Tsukete!</p>');
        $('<p class="tooltip"></p>').html($htmlbadge).appendTo('body').css('top', (e.pageY - 10) + 'px').css('left', (e.pageX + 20) + 'px').fadeIn('slow');
    }, function() {
        $(this).attr('title', $(this).data('tiptext'));
        $('.tooltip').remove();
    }).mousemove(function(e) {
        $('.tooltip').css('top', (e.pageY - 10) + 'px').css('left', (e.pageX + 20) + 'px');
    });
});

Hancki
Hancki

Hancki
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 03/10/2009
Mensagens : 8113
Pontos Ativos : 12117

Ver perfil do usuário https://ajuda.forumeiros.com/

Atendido / Resolvido Re: Efeito tooltip em imagens

Mensagem por Lobs em 01.03.19 17:56

@Hancki escreveu:Olá!

Se você quer usar numa imagem, que tal usarmos o URL único dessa imagem como a variável principal em vez de usar um #ID? Atente na linha 5:
Código:
$(document).ready(function() {
    // CSS
    $('head').append('<style>.tooltip {display: none; position: absolute; padding: 10px;color: #777; background-color: #fff; border: 1px solid #777; box-shadow: 0 1px 3px 1px rgba(0,0,0,0.5); border-radius: 3px;}</style>');
    // FIM CSS
    var imgSrc = 'https://i.imgur.com/RdBABnX.png'; // COLOCAR LINK DA IMAGEM ENTRE AS ASPAS
    $('img[src="' + imgSrc + '"]').hover(function(e) { // PARTE PARA ESCOLHER O ELEMENTO EM HOVER
        var $htmlbadge = $('<strong>Rei Tsukete</strong> \<br> \<p>Cuidado com o Tsukete!</p>');
        $('<p class="tooltip"></p>').html($htmlbadge).appendTo('body').css('top', (e.pageY - 10) + 'px').css('left', (e.pageX + 20) + 'px').fadeIn('slow');
    }, function() {
        $(this).attr('title', $(this).data('tiptext'));
        $('.tooltip').remove();
    }).mousemove(function(e) {
        $('.tooltip').css('top', (e.pageY - 10) + 'px').css('left', (e.pageX + 20) + 'px');
    });
});

Hancki

Hey, Hancki, obrigado! Esse código é muito funcional nos perfis, mas tem um problema com ele...

Nos tópicos ele não está funcionando! Veja bem, eu estou utilizando esse javascript:

Código:
$(document).ready(function() {
            // CSS
            $('head').append('<style>.tooltip {display: none; position: absolute; padding: 10px;color: #777; background-color: #fff; border: 1px solid #777; box-shadow: 0 1px 3px 1px rgba(0,0,0,0.5); border-radius: 3px;}</style>');
            // FIM CSS
            var imgSrc = 'https://i.imgur.com/wR7IpFG.gif'; // COLOCAR LINK DA IMAGEM ENTRE AS ASPAS
            $('img[src="' + imgSrc + '"]').hover(function(e) { // PARTE PARA ESCOLHER O ELEMENTO EM HOVER
                var $htmlbadge = $('<strong>Rei Tsukete</strong> \<br> \<p>Cuidado com o Tsukete!</p>');
                $('<p class="tooltip"></p>').html($htmlbadge).appendTo('body').css('top', (e.pageY - 10) + 'px').css('left', (e.pageX + 20) + 'px').fadeIn('slow');
            }, function() {
                $(this).attr('title', $(this).data('tiptext'));
                $('.tooltip').remove();
            }).mousemove(function(e) {
                $('.tooltip').css('top', (e.pageY - 10) + 'px').css('left', (e.pageX + 20) + 'px');
            });
        });

https://www.forumnsanimes.com/t80605p20-pronto-para-ganhar-a-conquista-defensor-da-tsunade-topico-oficial#1439862

Veja nessa postagem do YoKi, a gif não está aparecendo o efeito tooltip! Mas se eu entrar no perfil dele e visualizar por lá, a tooltip aparece.

Mano, o que eu faço? Estou perdido! xD

Essa div (em cima da mensagem do YoKi) em que a gif está e não aparece a tooltip foi inserida no template. O conteúdo (que era pra estar ali naquela parte de informações, "postagens", "membro desde", "Idade") vai para ela através do seguinte javascript:

Código:
$(function () {
          $('.post').each(function () {
              var $this = $(this),
                    conq = $this.find('.postprofile-info .label:contains("Conquistas")').next('.fieldContent').html();
       
                    $this.find('.conquistas').html(conq);
                    $this.find('.postprofile-info .label:contains("Conquistas")').hide();
                    $this.find('.postprofile-info .label:contains("Conquistas")').next('.fieldContent').hide();
          });
        });

Não sei se isso tem qualquer relação com o fato da tooltip não funcionar com a gif ali, mas estou te passando só por via das dúvidas.
Lobs

Lobs
Nível 5

Masculino
Inscrito dia : 02/06/2013
Mensagens : 57
Pontos Ativos : 87

Ver perfil do usuário http://nsanimes.forumeiro.net/

Atendido / Resolvido Re: Efeito tooltip em imagens

Mensagem por Hancki em 01.03.19 23:19

Olá!

O melhor é mesmo criar um tópico e inserir a imagem, tipo assim:
Efeito tooltip em imagens WR7IpFG

Remova o código que insere esse campo de conquistas, deixe apenas o meu. Se funcionar assim, significa que esse código tem algum erro e vamos ter que o reformular para resolver.

Hancki
Hancki

Hancki
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 03/10/2009
Mensagens : 8113
Pontos Ativos : 12117

Ver perfil do usuário https://ajuda.forumeiros.com/

Atendido / Resolvido Re: Efeito tooltip em imagens

Mensagem por Roger123 em 04.03.19 21:03

Tópico resolvido


Tópico marcado como resolvido pela equipe por abandono do autor.


Seja bem-vindo ao Fórum dos Fóruns!
Veja aqui alguns links importantes a saber:



Roger123 - Ajudeiro

Efeito tooltip em imagens Pmb0kx10
Roger123

Roger123
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 30/06/2018
Mensagens : 1423
Pontos Ativos : 1711

Ver perfil do usuário https://ajuda.forumeiros.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum