![[Tutorial VIP] Tooltip em emblemas e medalhas! Buddy_Group](https://2img.net/h/cdn1.iconfinder.com/data/icons/df_On_Stage_Icon_Set/128/Buddy_Group.png){kind=icon}
Suporte Forumeiros
Início
Entrar
Cadastre-se
Mensagens
MoedasTooltips
![[Tutorial VIP] Tooltip em emblemas e medalhas! 1313_zps41e9f8db](https://2img.net/h/i1158.photobucket.com/albums/p608/XxHawkeye/1313_zps41e9f8db.gif)
Primeiro temos que modificar nosso css
Painel de Controle> Visualização> Imagens e Cores> Cores> CSS e folha de estilo:
E então o html, infelizmente, tem que colocar quadro a quadro e cada um pode colocar texto e mudá-lo.
Se você quiser adicionar uma outra imagem só repetir o código e você é * Q *
Créditos:
![[Tutorial VIP] Tooltip em emblemas e medalhas! Coollo10](https://i.servimg.com/u/f72/18/22/97/64/coollo10.gif)
T-Lord (por criar o tutorial e editar todo o código)
Primeiro temos que modificar nosso css
Painel de Controle> Visualização> Imagens e Cores> Cores> CSS e folha de estilo:
- Código:
/*zonetoonytooltip*/
a.Ntooltip {
position: relative; /* é a posição normal */
text-decoration: none !important; /* forçar sem sublinhar */
color:#cc85b3 !important; /* força cor do texto */
font-weight:bold !important; /* força negrito */
}
a.Ntooltip:hover {
z-index:999; /* será sobretudo */
background-color:none; /* Deve ter uma cor de fundo */
}
a.Ntooltip span {
display: none; /* o elemento será escondido */
}
a.Ntooltip:hover span {
display: block; /* é forçado a mostrar o bloco */
position: absolute; /* é forçado a ser localizada numa tela */
top:2em; left:2em; /* onde será */
width:150px; /* largura padrão terá */
padding:5px; /* a separação entre o conteúdo e as bordas */
background-color: #fafafa; /* a cor de fundo padrão */
border-radius: 20px 20px 20px 20px;
border-right: 5px solid #B9274E;
border-left: 5px solid #B9274E;
border-bottom: 0px;
border-top: 0px;
color: #000000; /* cor de textos padrão */
}
E então o html, infelizmente, tem que colocar quadro a quadro e cada um pode colocar texto e mudá-lo.
- Código:
<a class=Ntooltip href="#"><img src="URL IMAGEM" /><span>TEXTO TEXTO TEXTO</span></a>
Se você quiser adicionar uma outra imagem só repetir o código e você é * Q *
Créditos:
T-Lord (por criar o tutorial e editar todo o código)
