Efeito tooltip em imagens

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)

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


Aguardo uma resposta sua,
pedxz.

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)

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

Dando mais um up aqui..

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

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)

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

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

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 escreveu:

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

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:


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

Boa tarde,

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

Deseja isto, certo?

http://prntscr.com/mqggdt

Abraço!

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).

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 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

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 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"

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 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.

Olá!

O melhor é mesmo criar um tópico e inserir a imagem, tipo assim:


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