clique aqui


BLOGS QUE ADMIRO ACIMA E OUTROS LINKS ABAIXO

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