Novo efeito tooltip para Tumblr
..."como colocar efeito tooltip
(personalizar a “janelinha”
que aparece quando se
coloca o mouse sobre um link)"
"Neste tutorial
... ensinar -se-há
um ainda mais fácil de usar,
e com dicas melhores ainda
de como você pode personalizar seu tooltip !"
"Após isso,
você simplesmente
deve colar
antes da tag
o seguinte código
seu "tooltip" já está pronto ! "
Você pode personalizá-lo de
diversas formas,
mudando,
adicionando e
removendo propriedades
dentro do marcador
“a[data-title]:hover:after”.
"Uma observação a ser feita é que as seguintes propriedades não devem ser removidas:"
content: attr(data-title);
position: absolute;
left: 100%;
top: 110%;
"Com excessão dessas, você pode alterar qualquer uma,
e,
se não souber CSS,
você pode usar este site para gerar os estilos para você,
e depois é só colar no seletor:
CSS3 Generator."
"Lembrando que,
para que a tooltip apareça, seu link deve ter um título. "
"Para colocar um título,
você deve seguir fazer
segundo a imagem abaixo,
quando estiver colocando
um link no seu post:"
Caso o link seja diretamente no theme,
não se esqueça de colocar
o título dele no atributo title !
(personalizar a “janelinha”
que aparece quando se
coloca o mouse sobre um link)"
"Neste tutorial
... ensinar -se-há
um ainda mais fácil de usar,
e com dicas melhores ainda
de como você pode personalizar seu tooltip !"
"Uma das primeira coisa que recomendo fazer é guardar uma cópia do código do seu theme no seu computador, para caso algo dê errado na hora de salvar, ou você queira reverter depois."
"Após isso,
você simplesmente
deve colar
antes da tag
</head> do seu theme"o seguinte código
"E pronto,<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script><script src=”http://tumbletricks.webs.com/novo_tooltip.js”></script>
<style> a:hover {
position: relative;
}
a[data-title]:hover:after {
content: attr(data-title);
position: absolute;
left: 100%;
top: 110%;
padding: 4px 8px;
color: #333;
white-space: nowrap;
z-index: 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}
</style>
seu "tooltip" já está pronto ! "
Você pode personalizá-lo de
diversas formas,
mudando,
adicionando e
removendo propriedades
dentro do marcador
“a[data-title]:hover:after”.
"Uma observação a ser feita é que as seguintes propriedades não devem ser removidas:"
content: attr(data-title);
position: absolute;
left: 100%;
top: 110%;
"Com excessão dessas, você pode alterar qualquer uma,
e,
se não souber CSS,
você pode usar este site para gerar os estilos para você,
e depois é só colar no seletor:
CSS3 Generator."
"Lembrando que,
para que a tooltip apareça, seu link deve ter um título. "
"Para colocar um título,
você deve seguir fazer
segundo a imagem abaixo,
quando estiver colocando
um link no seu post:"
Caso o link seja diretamente no theme,
não se esqueça de colocar
o título dele no atributo title !
Leia também:
Postagens
