Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Acesso rápido

Fóruns de suporte oficiais
Conectar-se

Esqueci minha senha

Últimos assuntos
» (PEDIDO) Ranks
Hoje à(s) 05:26 am por mrvisible

» Botão enviar e pré-visualizar
Hoje à(s) 01:46 am por Baki

» [Pedido] Banner ®
Hoje à(s) 01:37 am por -xGabriel..

» Botões padrões tema pokemon
Hoje à(s) 12:54 am por APOllO

» Fim do rodapé
Ontem à(s) 11:34 pm por PrisoN†BreaK

» Overall_Header
Ontem à(s) 10:26 pm por iScroll

» Bug na mensagem em citação?
Ontem à(s) 09:40 pm por Harleen

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Quem está conectado
213 usuários online :: Nenhum usuário registrado, Nenhum Invisível e 213 Visitantes :: 2 Motores de busca

Nenhum

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em 24/12/09, 01:05 pm

Tooltip no nome do usuário

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

Resolvido Tooltip no nome do usuário

Mensagem por Ramon Rodrigues em 27/07/17, 01:51 pm

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
avatar

Ramon Rodrigues
Nível 6

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

http://www.bmwserver.com

Resolvido Re: Tooltip no nome do usuário

Mensagem por Luiz em 27/07/17, 02:30 pm

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:
-> http://ajuda.forumeiros.com/t108758-

o/
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 3763
Pontos Ativos : 4449

https://github.com/lffg/

Resolvido Re: Tooltip no nome do usuário

Mensagem por Ramon Rodrigues em 28/07/17, 11:29 pm

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
avatar

Ramon Rodrigues
Nível 6

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

http://www.bmwserver.com
  • 0

Resolvido Re: Tooltip no nome do usuário

Mensagem por Harleen em 31/07/17, 10:54 am

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

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

Até mais


Bem-vindo ao FDF, leia:
Flecha ajudeiros Consulte o regulamento do setor suporte
Flecha ajudeiros Leia as Perguntas e Respostas
Flecha ajudeiros Confira a Lista de Tutoriais, Dicas e Astúcias
Seja sempre educado e descreva sua questão detalhadamente
Não peça suporte por MP.

avatar

Harleen
Ajudeira
Ajudeira

Feminino
Inscrito dia : 09/07/2012
Mensagens : 1438
Pontos Ativos : 1864

https://soulfulbrmusic.forumeiros.com/

Resolvido Re: Tooltip no nome do usuário

Mensagem por Ramon Rodrigues em 03/08/17, 12:22 am

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

Ramon Rodrigues
Nível 6

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

http://www.bmwserver.com

Resolvido Re: Tooltip no nome do usuário

Mensagem por Harleen em 03/08/17, 12:30 pm

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
avatar

Harleen
Ajudeira
Ajudeira

Feminino
Inscrito dia : 09/07/2012
Mensagens : 1438
Pontos Ativos : 1864

https://soulfulbrmusic.forumeiros.com/

Resolvido Re: Tooltip no nome do usuário

Mensagem por Ramon Rodrigues em 03/08/17, 04:50 pm

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
avatar

Ramon Rodrigues
Nível 6

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

http://www.bmwserver.com

Resolvido Re: Tooltip no nome do usuário

Mensagem por Luiz em 04/08/17, 04:57 pm

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

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 3763
Pontos Ativos : 4449

https://github.com/lffg/

Resolvido Re: Tooltip no nome do usuário

Mensagem por Ramon Rodrigues em 07/08/17, 09:13 pm

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
avatar

Ramon Rodrigues
Nível 6

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

http://www.bmwserver.com

Resolvido Re: Tooltip no nome do usuário

Mensagem por Luiz em 07/08/17, 09:18 pm

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

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 3763
Pontos Ativos : 4449

https://github.com/lffg/

Resolvido Re: Tooltip no nome do usuário

Mensagem por Ramon Rodrigues em 08/08/17, 11:14 am

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

Ramon Rodrigues
Nível 6

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

http://www.bmwserver.com

Resolvido Re: Tooltip no nome do usuário

Mensagem por Luiz em 08/08/17, 02:17 pm

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. (ノ◕ヮ◕)ノ*:・゚✧
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 3763
Pontos Ativos : 4449

https://github.com/lffg/

Resolvido Re: Tooltip no nome do usuário

Mensagem por Ramon Rodrigues em 08/08/17, 05:00 pm


O cursor estava em Johnnie
avatar

Ramon Rodrigues
Nível 6

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

http://www.bmwserver.com

Resolvido Re: Tooltip no nome do usuário

Mensagem por Luiz em 08/08/17, 05:06 pm

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

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 3763
Pontos Ativos : 4449

https://github.com/lffg/

Resolvido Re: Tooltip no nome do usuário

Mensagem por Ramon Rodrigues em 08/08/17, 10:37 pm



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
avatar

Ramon Rodrigues
Nível 6

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

http://www.bmwserver.com

Resolvido Re: Tooltip no nome do usuário

Mensagem por Luiz em 08/08/17, 10:43 pm

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

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

o/
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 3763
Pontos Ativos : 4449

https://github.com/lffg/

Resolvido Re: Tooltip no nome do usuário

Mensagem por Kyo Panda em 14/08/17, 08:50 am

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

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3819
Pontos Ativos : 5044

http://ajuda.forumeiros.com

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

- Tópicos similares

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