Tooltip no nome do usuário

Detalhes da questão

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

Descrição

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

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/

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

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

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.

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

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, 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 grupo	Cor do grupo (em HEX)
Admineiros	#EF3333
Moderadeiros	#7BB92B
Ajudeiros	#C39300
Publicideiros	#00B5D1
Artmeiros	#CC66CC

Código:

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!

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/

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

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:

O cursor estava em Johnnie

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.
PS: Essa era a razão para o problema acima (aqui).

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



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

Na linha 13 do código que passei acima, tem:

Código:

top: 30px;

Troque por:

Código:

top: -30px;

o/