16/09/2012

Tutorial: Personalizando a sua Tooltip

||

Esse tutu eu peguei do blog Assunto de Garota, todos os creditos vão para lá. Bom nesse tutu irei mostrar como personalizar eu tooltip para quem não sabe, ele e aquela legenda qua aparece ao passar o mouse sobre algum link ou imagem.

Em seu HTML procure por </head> e acima dela cole o proximo codigo

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><script language='JavaScript' src='http://static.tumblr.com/oiizew6/8B5lzwf17/script.js' type='text/JavaScript'/>

Novamente você ira procurar por outro codigo dessa vez sera o ]]></b:skin>, assim que o achar acima dele cole isso:


    div#qTip {
    padding: 3px;
    background: transparent; /* Cor de Fundo*/
    color: #8b8378; /* Cor da Fonte */
    position: absolute;
    z-index: 1000;
    border: 1px solid #8b8378; /* Cor da Borda */
    display: none;
    font: bold arial;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    }


Agora é  só personalizar do seu estilo!

3 comentários:

  1. adorei, muito obrigada pelo tuto u3u
    kissus ;3

    ResponderExcluir
  2. Este comentário foi removido por um administrador do blog.

    ResponderExcluir
    Respostas
    1. AHHHHHHHHH não acredito que fiz isso, gomen.... gomen.. foi sem querer. Mas é bem fácil colocar em imagens você usa esse código que mostro nessa postagem, não aceito enviar pelo comentário =/

      Eu mostro nesse tutu aqui: http://www.bunnycrazy.net/2012/09/efeito-tooltip-nos-titles.htm

      Excluir

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram