Veja: Como se faz "Novo efeito tooltip para Tumblr"
Autor: edilene | Publicado: 2014-04-26T19:15:00-07:00


                
Novo efeito tooltip para Tumblr













..."como colocar efeito tooltip&nbsp;
(personalizar a “janelinha”&nbsp;
que aparece quando se&nbsp;
coloca o mouse sobre um link)"

"Neste tutorial&nbsp;
... ensinar -se-há
&nbsp;um ainda mais fácil de usar,&nbsp;
e com dicas melhores ainda&nbsp;
de como você pode personalizar seu tooltip&nbsp;!"




"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,&nbsp;
você simplesmente&nbsp;
deve colar&nbsp;
antes da tag &lt;/head&gt; do seu theme"o seguinte código


&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"&gt;&lt;/script&gt;&lt;script src=”http://tumbletricks.webs.com/novo_tooltip.js”&gt;&lt;/script&gt;&lt;style&gt;
a:hover { &nbsp; position: relative; } a[data-title]:hover:after { &nbsp; content: attr(data-title);&nbsp; position: absolute;&nbsp; left: 100%;&nbsp; top: 110%; &nbsp; padding: 4px 8px; &nbsp; color: #333; &nbsp; white-space: nowrap; &nbsp; z-index: 20px; &nbsp; -moz-border-radius: 5px; &nbsp; -webkit-border-radius: 5px;  &nbsp; border-radius: 5px;  &nbsp; -moz-box-shadow: 0px 0px 4px #222;  &nbsp; -webkit-box-shadow: 0px 0px 4px #222;  &nbsp; box-shadow: 0px 0px 4px #222;  &nbsp; background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); &nbsp; background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);  &nbsp; background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);  &nbsp; background-image: -o-linear-gradient(top, #eeeeee, #cccccc); }&lt;/style&gt;


"E pronto,&nbsp;
seu "tooltip" já está pronto&nbsp;! "
&nbsp;Você pode personalizá-lo de&nbsp;
diversas formas,&nbsp;
mudando,&nbsp;
adicionando e
&nbsp;removendo propriedades&nbsp;
dentro do marcador&nbsp;
“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,&nbsp;
e,
se não souber CSS,&nbsp;
você pode usar este site para gerar os estilos para você,&nbsp;
e depois é só colar no seletor:&nbsp;
CSS3 Generator.""Lembrando
 que,
&nbsp;para que a tooltip apareça, seu link deve ter um título. "

"Para 
colocar um título, &nbsp;
você deve seguir fazer&nbsp;
segundo a imagem abaixo,&nbsp;
&nbsp;quando estiver colocando&nbsp;
um link no seu post:"

Caso o link seja diretamente no theme,&nbsp;
não se esqueça de colocar&nbsp;
o título dele no atributo title&nbsp;!




 



 

 
Leia também:

 
 

Colocar efeito tooltip nos links do seu Tumblr




  





Por: Talysson Oliveira Cassiano



    
  
  
 

  
   
    






                
              
            

            
            

            
            
            
            

              
    
     
     
     
    


          
          

          
























  Todos os tutoriais
 

  HTML básico
 

  Cores HTML
 

  Sobre
 

  Facebook 
 

  Twitter 
   

 

        Divulgue seu Tumblr
    

    Posts no seu email



fonte:

tumbletricksnet




Nenhum comentário ainda.?!






Nome (obrigatório)
▼ 

        
email (não será divulgado *)
(obrigatório)
▼ 

        &nbsp;
seu website*/
 (obrigatório)
Escreva&nbsp;
seu comentário&nbsp;
aqui▼