27 dezembro 2014

Tooltip personalizado

Exemplo de tooltip personalizado
Vocês lotaram meu e-mail com essa pergunta e hoje eu vim aqui responder! Não tem nenhum segredo e se você seguir o passo a passo certinho, vai ter um tooltip personalizado bem legal. Eu ainda fiz mais 4 modelos pra você adicionar no seu blog.

1) Vá em Editar HTML, dê Ctrl + F e digite </head>. Antes disso, coloque o seguinte código:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><script language='JavaScript' src='http://yourjavascript.com/1411249631/qTip.js' type='text/JavaScript'/>
2) Escolha o modelo que você deseja:

Dê Ctrl + F, digite ]]></b:skin>. Antes disso, coloque o seguinte código:
/* Tooltip Personalizado por Carolice.com */
div#qTip {
padding-top: -2px;
padding-bottom: -2px;
padding-left: 25px;
padding-right: 5px; /*Espaço entre a borda e o texto*/
display: none; /*Não mexa*/
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxv4rDJgFQyQvD1Szx9zfGL34h6HwNB-1XV6yIUJKdNv9caZOfM3mxbWtB8mJVe03RbH4KLkBX-jn-P8z7Hzc2CsybeSmWzU5r3P9RvaSnStf1xsa2vt7yPzzuyWvzvhC852TiUm-X7snn/s1600/Carolice.png)
no-repeat; /*Não mexa*/
text-align: left; /*Não mexa*/
color: #79603e; /*Cor da fonte*/
font-family: Georgia; /*Tipo de fonte*/
font-size: 13px; /*Tamanho da fonte*/
font-style: italic; /*Fonte em itálico*/
position: absolute; /*Não mexa*/
z-index: 1000; /*Não mexa*/
border-radius: 0px; /*Borda arredondada*/
border: 1px solid #F5F5F5;}

Dê Ctrl + F, digite ]]></b:skin>. Antes disso, coloque o seguinte código:
/* Tooltip Personalizado por Carolice.com */
div#qTip {
padding-top: -2px;
padding-bottom: -2px;
padding-left: 5px;
padding-right: 5px; /*Espaço entre a borda e o texto*/
display: none; /*Não mexa*/
background: #f0b859; /* Cor de fundo */
color: #fff; /*Cor da fonte*/
text-shadow: 0px 1px 0px #e1a746;
font-family: Georgia; /*Tipo de fonte*/
font-size: 13px; /*Tamanho da fonte*/
font-style: italic;
position: absolute; /*Não mexa*/
z-index: 1000; /*Não mexa*/
border-radius: 5px;
box-shadow: inset 0 0 8px #eb8e42;
border: 1px solid #F5F5F5;}

Dê Ctrl + F, digite ]]></b:skin>. Antes disso, coloque o seguinte código:
/* Tooltip Personalizado por Carolice.com */
div#qTip {
padding-top: -2px;
padding-bottom: -2px;
padding-left: 5px;
padding-right: 5px; /*Espaço entre a borda e o texto*/
display: none; /*Não mexa*/
background: #c7d695; /* Cor de fundo */
color: #fff; /*Cor da fonte*/
text-shadow: 0px 1px 0px #a7b774;
font-family: Georgia; /*Tipo de fonte*/
font-size: 13px; /*Tamanho da fonte*/
font-style: italic;
position: absolute; /*Não mexa*/
z-index: 1000; /*Não mexa*/
border-radius: 0px;
border: 2px dotted #F5F5F5;}

Dê Ctrl + F, digite ]]></b:skin>. Antes disso, coloque o seguinte código:
/* Tooltip Personalizado por Carolice.com */
div#qTip {
padding-left: 5px;
padding-right: 5px; /*Espaço entre a borda e o texto*/
display: none; /*Não mexa*/
background: #fff; /* Cor de fundo */
color: #9bb1be; /*Cor da fonte*/
font-family: "silkscreen";
font-size: 8px;
position: absolute; /*Não mexa*/
z-index: 1000; /*Não mexa*/
border: 1px solid #F5F5F5;}

Comente com o Facebook:

19 comentários ♥

  1. Oi Carol, como vai?
    Levei um susto quando tentei acessar o EDF e não entrou. Daí por um acaso vi seu comentário em um blog, achei a foto conhecida, e resolvi acessar. Ainda bem que o fiz!
    Li seus posts sobre a mudança, e te entendendo profundamente. Também fiz algo parecido com o meu, e sei o que você sentiu ao fazê-lo. Gostei muito das mudanças, até porque o conteúdo novo que você propõe, é bem parecido com o que eu gosto de fazer <3
    E eu não posso deixar de comentar: que coisa mais linda seu layout! Lindo e inspirador! Não posso deixar de perguntar: você faz layout sob encomenda? Amei!

    Um abraço e boa sorte com essa nova fase, aposto que vai ser um sucesso!
    http://www.winterbird.com.br/

    ResponderExcluir
    Respostas
    1. Oi Jéss <3 Obrigada mesmo, flor.
      Eu ainda não faço, mas tenho planos de abrir em fevereiro! Daí eu aviso, pode ser?
      Beijos e sucesso também ♥

      Excluir
    2. Pode sim Carol!
      Não se esqueça de me avisar, hihi <3

      Excluir
  2. Carol o blog está uma fofura! Esse layout, os novos assuntos eu também estou tentando reformar o meu blog, mas o que me quebra é o layout. Tá lindo, parabéns!

    ResponderExcluir
  3. Este comentário foi removido pelo autor.

    ResponderExcluir
  4. Oi Carol,
    Adorei a mudança, o blog ficou lindo demais e mais sucesso na nova fase.
    Amei o novo nome, também!
    Adoro os tutoriais, são uma graça esses tooltips

    beijos e que seu 2014 se encerre lindamente
    Nana - Obsession Valley

    ResponderExcluir
  5. Oiee Carol, tudo bom?
    Tinha comentado antes mas infelizmente travou aqui (rs), nossa que tutorial mais lindo ♥ Tem um tempinho já que estou a procura de Tooltip's pois sempre quando achava um freebie dele ficava dando erro #bolado hUAHAUAHUAH. Mas então, fiquei uma dúvida enorme em qual colocar no blog mas achei um com a carinha dele haha, obrigado pela postagem me ajudou bastanteeeeee!!

    Beeeijos!
    Lu || Um Grande Vício Literário

    ResponderExcluir
  6. Que lindo!
    Estava mesmo atrás de algum tuto fácil que ensinasse isso, hahah.

    Beijinhos.
    www.minineko.org

    ResponderExcluir
  7. Oi, Carol!
    Que lindo que ficou o novo blog. Amei demais o nome, o layout e os novos conteúdos...
    Muito sucesso nessa nova fase! Estarei aqui sempre acompanhando! <3

    Beijos, Fer.
    http://viciosemtres.blogspot.com.br/

    ResponderExcluir
  8. Hey, Carol! Tooltip personalizado é uma graça e os seus modelos estão uma fofura, principalmente esse do coração! Estive ocupada esses dias com o novo layout do Bibli (que eu acho que do jeito que sou só irá ficar pronto na virada do ano rs) mas já coloquei tooltip personalizado lá também! Obrigada! Beijos :*

    www.bibliophiliarium.com

    ResponderExcluir

Obrigada por comentar!