11/09/2012

Tooltip no blog, personalizando a Tooltip [000]


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

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

Códigos
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><script language='JavaScript' src='http://sites.google.com/site/webunnycrazy/c/jquery.style-one-my-tooltips.js' type='text/JavaScript'/>

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

Códigos
    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. Anônimo13/10/13

    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

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345