Efeito de descrição dos ranks

Detalhes da questão

Endereço do fórum: http://easydm.forumeiro.com/
Versão do fórum: PunBB

Descrição

Bom, quero deixa a descrição aparecer, somente quando passar o mouse em cima da imagem dele, como aqui:
https://imgur.com/a/cFKpd
http://bestweb.forumais.com/

Olá,

Vá em Painel de controle Módulos HTML & JavaScript Gestão dos códigos JavaScripts Criar um novo JavaScript e adicione esse código com Investimento em Nos tópicos:

Código:

/* global jQuery */

(function($) {
  'use strict';

  if (!/^\/t\d+.*/i.test(location.pathname)) {
    return;
  }

  $(function() {
    var $span = $('<span class="fa-useless-rank-hover"></span>');

    $('.user-basic-info span').each(function() {
      var $self = $(this);
      $span.clone().text($self.text()).appendTo($self);
    });
  });
}(jQuery));


Após, vá em Painel de controle Visualização Imagens e Cores Cores Folha de estilo CSS e adicione o seguinte código ao final da caixa de texto:

Código:

.user-basic-info > span {
  position: relative;
}

.fa-useless-rank-hover {
  background-color: #fff;
  border: 1px #ccc solid;
  display: block;
  padding: 10px 5px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  color: #333;
  text-shadow: none;
  margin-bottom: 0;
  opacity: 0;
  box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.2);
  transition: 250ms ease;
  transition-property: opacity, margin-bottom;
}

.fa-useless-rank-hover:after,
.fa-useless-rank-hover:before {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.fa-useless-rank-hover:after {
  border-color: transparent;
  border-top-color: #fff;
  border-width: 10px;
  margin-left: -10px;
}

.fa-useless-rank-hover:before {
  border-color: transparent;
  border-top-color: #ccc;
  border-width: 11px;
  margin-left: -11px;
}

.user-basic-info > span:hover .fa-useless-rank-hover {
  opacity: 1;
  margin-bottom: 15px;
}

o7

---

Tópico movido de 'Questões sobre a aparência do fórum' para 'Questões sobre códigos'

A descrição do rank, ainda continua aparecendo, não fica ocultada como no do bestweb, e teria também como você arredondar a borda.

Veja como está: http://easydm.forumeiro.com/t269-sugestoes-e-melhorias-leia

PrisoN†BreaK escreveu:Endereço do fórum: http://exercito-bpf.forumeiro.com/

PrisoN†BreaK escreveu:Veja como está: http://easydm.forumeiro.com/t269-sugestoes-e-melhorias-leia

Fórum errado = Código errado. ¯\_(ツ)_/¯

---

Troque o JS por esse:

Código:

/* global jQuery */

(function($) {
  'use strict';

  if (!/^\/t\d+.*/i.test(location.pathname)) {
    return;
  }

  $(function() {
    $('.user-basic-info > img').hover(function() {
      $(this).parent().toggleClass('fa-useless-rank-hover');
    });
  });
}(jQuery));


E o CSS por esse:

Código:

.user-basic-info {
  position: relative;
}

.user-basic-info > span {
  background-color: #fff;
  border: 1px #ccc solid;
  display: block;
  padding: 10px 5px;
  position: absolute;
  left: 20px;
  right: 20px;
  color: #333;
  text-shadow: none;
  margin-top: -20px;
  opacity: 0;
  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2);
  transition: 250ms ease;
  transition-property: opacity, margin-top;
}

.user-basic-info > span:after,
.user-basic-info > span:before {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.user-basic-info > span:after {
  border-color: transparent;
  border-top-color: #fff;
  border-width: 10px;
  margin-left: -10px;
}

.user-basic-info > span:before {
  border-color: transparent;
  border-top-color: #a9a9a9;
  border-width: 11px;
  margin-left: -11px;
}

.user-basic-info.fa-useless-rank-hover > span {
  opacity: 1;
  margin-top: -35px;
}

o/

Tem como arredondar a borda dele?, e tira esse efeito de negrito?

@EDIT

O efeito na verdade é esse: http://bestweb.forumais.com/
Que no caso, ele substitui aquele balão padrão de quando passa o mouse em títulos por este atual, da bestweb, tem como coloca este efeito? É o mesmo efeito do rank '~'

UP

Eu tentei ajustar o CSS do rank e não deu muito certo.

Vamos tentar outra rota. Peço que remova o CSS do rank.

Pronto, retirei o código

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

Quando o fizer, dê um toque para acertarmos o visual. o/

pronto, coloquei.

O senhor chegou a aplicar o alteração? Não encontrei as tags do tutorial no seu HTML.

Sim, apliquei, e ele está ativo.

Estava olhando para o fórum errado novamente... Alterei o tópico. >.>

---

Adicione ao CSS:

Código:

.tipsy {
  padding: 5px 5px 10px;
}

.tipsy-inner {
  background-color: #fff;
  color: #333;
  font-size: 14px;
  padding: 8px 10px;
}

.tipsy-arrow {
  top: 37px;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0);
  border-top-color: #fff;
  border-width: 8px;
  margin-left: -13px;
}

.user-basic-info > span {
  display: none;
}

E troque essa parte do tutorial:

Código:

<script type='text/javascript'>
  $(function() {
    $('.tool-tip').tipsy({fade: true, gravity: 's'});
  });
</script>

Por:

Código:

<script type='text/javascript'>
  $(function() {
    $('.tool-tip').tipsy({fade: true, gravity: 's', opacity: 1});
  });
</script>

Na parte dos ranks ficou sem resultado, só fez ocultar os nomes. Teria como você também coloca uma cor mais branca no balão e preta nos nomes.

O código CSS do Tipsy está sobrescrevendo as alterações...

Tente trocar o CSS por esse:

Código:

body .tipsy {
  padding: 5px 5px 10px;
}
 
body .tipsy-inner {
  background-color: #fff;
  color: #000;
  font-size: 14px;
  padding: 8px 10px;
}
 
body .tipsy-arrow {
  top: 37px;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0);
  border-top-color: #fff;
  border-width: 8px;
  margin-left: -13px;
}
 
.user-basic-info > span {
  display: none;
}

Ainda sem resultado nas descrições dos ranks

O senhor marcou o script com Investimento em Todas as páginas? Pois ele não está sendo carregado na tela de tópico.

Mas ainda assim, troque o CSS:

Código:

body .tipsy {
    padding: 5px 5px 10px
}

body .tipsy-inner {
    background-color: #fff;
    color: #000;
    font-size: 14px;
    padding: 8px 10px;
    position: relative;
}

body .tipsy-inner:after {
   top: 100%;
   left: 50%;
   border: solid transparent;
   content: " ";
   height: 0;
   width: 0;
   position: absolute;
   pointer-events: none;
   border-color: rgba(255, 255, 255, 0);
   border-top-color: #fff;
   border-width: 8px;
   margin-left: -8px;
}

Para corrigir um problema com o posicionamento das setas.

Funcionou, porém a descrição agora ficou visível.

Esqueci de passar essa parte no código acima:

Código:

.user-basic-info > span {
  display: none;
}

Perdão. :/

Resolvido, muito obrigado amigo.