Tooltip no nome do usuário

4 participantes

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

Tópico resolvido Tooltip no nome do usuário

Mensagem por Ramon Rodrigues 27.07.17 17:51

Detalhes da questão


Endereço do fórum: http://www.bmwserver.com
Versão do fórum: ModernBB

Descrição


EF3333 - Tooltip no nome do usuário LSQVEsg
Quando passa o cursor a cima do nick
Gostaria de fazer em meu fórum, tenho o code mas tem q criar cor por cor na CSS, então recorri ao fórum pra fazer um code para todos
Desde já, agradeço
Ramon Rodrigues

Ramon Rodrigues
Nível 6

Masculino
Inscrito dia : 04/09/2015
Mensagens : 69
Pontos ativos : 91

http://www.bmwserver.com

Ir para o topo Ir para baixo

Principal contribuidor

Tópico resolvido Re: Tooltip no nome do usuário

Mensagem por Luiz 27.07.17 18:30

Por favor, antes de criar um tópico, verifique se sua dúvida já foi resolvida em um outro tópico do fórum!

Para isso, nós recomendamos o uso do sistema de busca, presente neste fórum.
Olá,

Leia este tópico que tem a mesma dúvida:
-> https://ajuda.forumeiros.com/t108758-

o/
Luiz

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 23/04/2016
Mensagens : 6641
Pontos ativos : 7439

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Tooltip no nome do usuário

Mensagem por Ramon Rodrigues 29.07.17 3:29

Como disse a cima, procuro um código só, este que me mandou eu teria que criar um para cada cargo, e esse eu ja tenho
Ramon Rodrigues

Ramon Rodrigues
Nível 6

Masculino
Inscrito dia : 04/09/2015
Mensagens : 69
Pontos ativos : 91

http://www.bmwserver.com

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Tooltip no nome do usuário

Mensagem por Harleen 31.07.17 14:54

Olá, leia essa mensagem do while e outras no tópico, veja se é isso que deseja

https://ajuda.forumeiros.com/t108498-tooltip-no-nome-de-usuario#760129

Até mais
Harleen

Harleen
Membro do fórum

Feminino
Inscrito dia : 09/07/2012
Mensagens : 1766
Pontos ativos : 2348

https://antenadogames.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Tooltip no nome do usuário

Mensagem por Ramon Rodrigues 03.08.17 4:22

Eu teria que duplicar esse código para cada cor aplicada por cada grupo '-'

Como eu ja disse duas vezes, procuro um código onde eu crie um tooltip com a cor de fundo na mesma cor do rank do usuário(a) com 70% de opacidade escrito somente o Grupo a qual ele pertence. Levando seu grupo como exemplo, ficaria Ajudeira.
Ramon Rodrigues

Ramon Rodrigues
Nível 6

Masculino
Inscrito dia : 04/09/2015
Mensagens : 69
Pontos ativos : 91

http://www.bmwserver.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Tooltip no nome do usuário

Mensagem por Harleen 03.08.17 16:30

Agora entendi, use esse
Código:
a[href^="/u"] span[style^="color: cor-do-grupo"] {
    position: relative;
}
a[href^="/u"] span[style^="color: cor-do-grupo"]:before {
    background-color: cor-desejada;
    border-radius: 4px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.28);
    color: #ffffff;
    content: "texto a exibir";
    display: inline-block;
    font-size: 12px;
    left: -60px;
    padding: 4px;
    position: absolute;
    top: -23px;
    visibility: hidden;
    width: 163px;
    z-index: 9999;
    opacity: 0.7;
}
a[href^="/u"] span[style^="color: cor-do-grupo"]:hover:before {
    visibility: visible;
}

Onde está escrito cor-do-grupo troque pela cor do grupo desejado, que foi dada no painel dos grupos.
Veja se resulta
Harleen

Harleen
Membro do fórum

Feminino
Inscrito dia : 09/07/2012
Mensagens : 1766
Pontos ativos : 2348

https://antenadogames.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Tooltip no nome do usuário

Mensagem por Ramon Rodrigues 03.08.17 20:50

Acho que to falando grego, se eu usar e trocar "cor-do-grupo" eu vou ter q duplicar esse codigo para usar um para cada grupo. Gostaria de um para todos
Ramon Rodrigues

Ramon Rodrigues
Nível 6

Masculino
Inscrito dia : 04/09/2015
Mensagens : 69
Pontos ativos : 91

http://www.bmwserver.com

Ir para o topo Ir para baixo

Principal contribuidor

Tópico resolvido Re: Tooltip no nome do usuário

Mensagem por Luiz 04.08.17 20:57

@Ramon Rodrigues, nós entendemos o que o senhor diz, mas não há outra forma fácil e boa de fazer isso.

Já que você não quer fazer da forma indicada por nós, eu me coloco à disposição para fazer um código JavaScript, porém, vou precisar que o senhor coloque neste tópico a lista de cada cor e grupo do seu fórum, por exemplo, aqui no Fórum dos Fóruns:

Nome do grupoCor do grupo (em HEX)
Admineiros#EF3333
Moderadeiros#7BB92B
Ajudeiros#C39300
Publicideiros#00B5D1
Artmeiros#CC66CC

Código:
Código:
[table class="table1"][tr][td]Nome do grupo[/td][td]Cor do grupo (em HEX)[/td][/tr]
[tr][td]Admineiros[/td][td]#EF3333[/td][/tr]
[tr][td]Moderadeiros[/td][td]#7BB92B[/td][/tr]
[tr][td]Ajudeiros[/td][td]#C39300[/td][/tr]
[tr][td]Publicideiros[/td][td]#00B5D1[/td][/tr]
[tr][td]Artmeiros[/td][td]#CC66CC[/td][/tr]
[/table]

Se o senhor não puder fazer isso, não teremos como lhe ajudar.

o/

---

PS: Eu nem sei falar grego; e te digo que @Harleen também não! Piscada Rindo
Luiz

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 23/04/2016
Mensagens : 6641
Pontos ativos : 7439

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Tooltip no nome do usuário

Mensagem por Ramon Rodrigues 08.08.17 1:13

Nome do grupoCor do grupo (em HEX)
Programador(a)#F40000
Diretor(a)#A408FF
Administrador(a)#00FB00
Moderador(a)#00FDFD
Estagiário(a)#8B8B8B
Designer#FF2E9D
Ramon Rodrigues

Ramon Rodrigues
Nível 6

Masculino
Inscrito dia : 04/09/2015
Mensagens : 69
Pontos ativos : 91

http://www.bmwserver.com

Ir para o topo Ir para baixo

Principal contribuidor

Tópico resolvido Re: Tooltip no nome do usuário

Mensagem por Luiz 08.08.17 1:18

Adicione essa peça em sua CSS:
Código:
a[href^="/u"] span[style] {
  position: relative;
}
a[href^="/u"] span[style]:before {
  background-color: #39c;
  border-radius: 4px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.28);
  color: #ffffff;
  content: "Grupo";
  display: inline-block;
  font-size: 12px;
  left: -60px;
  padding: 4px;
  position: absolute;
  top: -23px;
  visibility: hidden;
  width: 163px;
  z-index: 9999;
  opacity: 0.7;
}
a[href^="/u"] span[style]:hover:before {
  visibility: visible;
}

a[href^="/u"] span[style*="#F40000"]:before {
  content: "Programador(a)";
  background-color: #F40000;
}

a[href^="/u"] span[style*="#A408FF"]:before {
  content: "Diretor(a)";
  background-color: #A408FF;
}

a[href^="/u"] span[style*="#00FB00"]:before {
  content: "Administrador(a)";
  background-color: #00FB00;
}

a[href^="/u"] span[style*="#00FDFD"]:before {
  content: "Moderador(a)";
  background-color: #00FDFD;
}

a[href^="/u"] span[style*="#8B8B8B"]:before {
  content: "Estagiário(a)";
  background-color: #8B8B8B;
}

a[href^="/u"] span[style*="#FF2E9D"]:before {
  content: "Designer";
  background-color: #FF2E9D;
}

o/
Luiz

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 23/04/2016
Mensagens : 6641
Pontos ativos : 7439

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Tooltip no nome do usuário

Mensagem por Ramon Rodrigues 08.08.17 15:14

Muito para esquerda, gostaria que ficasse acima da posição do cursor
Ramon Rodrigues

Ramon Rodrigues
Nível 6

Masculino
Inscrito dia : 04/09/2015
Mensagens : 69
Pontos ativos : 91

http://www.bmwserver.com

Ir para o topo Ir para baixo

Principal contribuidor

Tópico resolvido Re: Tooltip no nome do usuário

Mensagem por Luiz 08.08.17 18:17

Troque todo o CSS passado anteriormente por:
Código:
a[href*="/u"] span[style] {
  position: relative;
}
a[href*="/u"] span[style]:before {
  background-color: #39c;
  border-radius: 4px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.28);
  color: #ffffff;
  content: "Grupo";
  display: inline-block;
  font-size: 12px;
  left: 50%;
  top: 30px;
  text-align: center;
  padding: 4px;
  position: absolute;
  visibility: hidden;
  width: 163px;
  z-index: 9999;
  opacity: 0.7;
  -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      -o-transform: translateX(-50%);
          transform: translateX(-50%);
}
a[href*="/u"] span[style]:hover:before {
  visibility: visible;
}

a[href*="/u"] span[style*="#F40000"]:before {
  content: "Programador(a)";
  background-color: #F40000;
}

a[href*="/u"] span[style*="#A408FF"]:before {
  content: "Diretor(a)";
  background-color: #A408FF;
}

a[href*="/u"] span[style*="#00FB00"]:before {
  content: "Administrador(a)";
  background-color: #00FB00;
}

a[href*="/u"] span[style*="#00FDFD"]:before {
  content: "Moderador(a)";
  background-color: #00FDFD;
}

a[href*="/u"] span[style*="#8B8B8B"]:before {
  content: "Estagiário(a)";
  background-color: #8B8B8B;
}

a[href*="/u"] span[style*="#FF2E9D"]:before {
  content: "Designer";
  background-color: #FF2E9D;
}

o/

Spoiler:
@Ramon Rodrigues escreveu:Muito para esquerda, gostaria que ficasse acima da posição do cursor
Não vamos esquecer da palavrinha mágica "por favor". E um "obrigado" também é sempre muito bem-vindo. (ノ◕ヮ◕)ノ*:・゚✧
Luiz

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 23/04/2016
Mensagens : 6641
Pontos ativos : 7439

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Tooltip no nome do usuário

Mensagem por Ramon Rodrigues 08.08.17 21:00

EF3333 - Tooltip no nome do usuário TuybsW8
O cursor estava em Johnnie
Ramon Rodrigues

Ramon Rodrigues
Nível 6

Masculino
Inscrito dia : 04/09/2015
Mensagens : 69
Pontos ativos : 91

http://www.bmwserver.com

Ir para o topo Ir para baixo

Principal contribuidor

Tópico resolvido Re: Tooltip no nome do usuário

Mensagem por Luiz 08.08.17 21:06

Você provavelmente tentou fazer um comentário no seu código, conforme indicado na imagem:
-> http://prntscr.com/g6170e

Os comentários no CSS devem ser abertos e fechados:
Código:
/* Olá, eu sou um comentário! */
O comentário feito com duas barras (//) não pode ser feito no CSS, sendo exclusivo para algumas linguagens, como JavaScript, PHP, etc.

Remova este comentário que tudo estará resolvido. Feliz
PS: Essa era a razão para o problema acima (aqui).
Luiz

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 23/04/2016
Mensagens : 6641
Pontos ativos : 7439

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Tooltip no nome do usuário

Mensagem por Ramon Rodrigues 09.08.17 2:37

EF3333 - Tooltip no nome do usuário FBQnUVz

Ficou bom, mas poderia ser a cima do cursor como havia pedido?

EF3333 - Tooltip no nome do usuário LOnS0SX

Assim não ocorreria isto pois ficaria em cima da data e do nome do tópico, e como ele tem uma opacidade de mais ou menos 60, 70 porcento não interferia em nada
Ramon Rodrigues

Ramon Rodrigues
Nível 6

Masculino
Inscrito dia : 04/09/2015
Mensagens : 69
Pontos ativos : 91

http://www.bmwserver.com

Ir para o topo Ir para baixo

Principal contribuidor

Tópico resolvido Re: Tooltip no nome do usuário

Mensagem por Luiz 09.08.17 2:43

Na linha 13 do código que passei acima, tem:
Código:
top: 30px;

Troque por:
Código:
top: -30px;

o/
Luiz

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 23/04/2016
Mensagens : 6641
Pontos ativos : 7439

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Tooltip no nome do usuário

Mensagem por Kyo Panda 14.08.17 12:50

Questão abandonada pelo autor, mas considerada resolvida por ter solução para o problema.
Tópico marcado como Resolvido e movido para Questões resolvidas.
Kyo Panda

Kyo Panda
Super membro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4641
Pontos ativos : 5937

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo


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