Tooltip Diferentes

Posted by : Unknown 16/03/2013

Oi Lindonas.....

Bom,para quem não sabe,tooltip são balões que trazem palavras ou frases dentro, só que no caso, esses tooltips só podem ser usado em imagens,como num recomendo e tals. Irei ensinar dessa vez,quatro tipos de tooltips bem legais para vocês poderem usar.

Demo 01 ●●●

Demo 02 ●●●

Demo 03 ●●●

Demo 04 ●●●

No código do css que estarei postando á baixo, no primeiro tt-wrapper li a vai ter owidth e heightque é a largura e altura das suas imagem que vão ficar, já no tt-wrapper li a span vai ter a width que é largura do balão,que você pode alterar se preferir, o margin-left que é a posição onde irá ficar, se é mais ao centro ou ao canto, border: 4px solid que basicamente não mudou nada do meu tooltip já que utilizei a mesma cor de fundo,mais ele é o contorno, background e text-shadow que são definidos pelo rgba ao invés de cores em hexadecimal (#cor) pois o fundo terá uma leve transparência, mais é super fácil. Abram seu photoshop e escolham a cor que iram querer para o fundo, quando vocês vão pegar uma cor, simplesmente copiam o que aparece depois de #, agora vamos copiar os números que estão em R, G e B e iremos colocar, exatamente nesta ordem no código do rgba. Ou seja: background-color: rgba(valor do R, valor do G, valor do B, 0.7); Ah, o 0.7 é o valor da transparência. E por fim, o border-top: 10px solid rgba(0,0,0,0.1); que é a setinha,você pode mudar se quiser,mais não aconselho. Já o box-shadow é a sonha que ficar no balão. E o resto dos código,não mexa em nada. Lembrando que você tem que colocar suas imagens que vão aparecer,dentro do css,faça que nem está logo á baixo:

.tt-wrapper li .CLASS DA IMAGEM 01{ background: url('imagem') top left no-repeat; }

Se quiserem mais imagens,é só ir repetindo o código,mudando a class da imagem.

Demo 01
Logo á cima,ensinei o necessário para você poder pessoalizar o seu tooltip,agora vai no seu css e coloque o código á baixo:

.tt-wrapper li{float: left; list-style-type:none;}
.tt-wrapper li a{ display: block; width: 68px; height: 70px; margin: 0 2px; outline: none; position: relative;}
.tt-wrapper li a span{width: 90px; height: auto; line-height: 20px; padding: 1px; left: 50%; margin-left: -55px; font-family: 'Georgia', serif; font-weight: 400; font-style: italic; font-size: 14px; color: #fff; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); text-align: center; border: 4px solid #4f4e76; background: rgba(78,79,118,1); text-indent: 0px; border-radius: 5px; position: absolute; pointer-events: none; bottom: 100px; opacity: 0; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
.tt-wrapper li a span:before,
.tt-wrapper li a span:after{ content: ''; position: absolute; bottom: -15px; left: 50%; margin-left: -9px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid rgba(0,0,0,0.1);}
.tt-wrapper li a span:after{ bottom: -14px; margin-left: -10px; border-top: 10px solid #4f4e76;}
.tt-wrapper li a:hover span{ opacity: 0.9; bottom: 70px;}

Siga os passo que ensinei logo á cima,para fazer as mudanças necessárias. Agora no teu html:

<ul class="tt-wrapper">

<li><a class="CLASS QUE COLOCOU NO CSS" href="LINK">TITULO</a></li>

</ul>

Enfim,é isso.

Demo 02

No css do demo número 02,vai ter no tt-wrapper li a span o width e height é o tamanho que o balão irá ficar, e lembrando que eles tem que serem iguais, e noline-height é a altura que o texto dentro no balão irá ficar. De resto,não mexa em nada,só na aparência mesmo. Coloque o código abaixo no css:

.tt-wrapper li a{ display: block; width: 68px;height: 70px; margin: 0 2px; outline: none; position: relative; z-index: 2; text-indent: -9000px;}

.tt-wrapper li{float: left; list-style-type:none;}

.tt-wrapper { padding: 0; width: 435px; height: 70px; margin: 80px auto 30px auto;}

.tt-wrapper li a span{ width: 70px; height: 70px; line-height: 70px; padding: 10px; left: 50%; margin-left: -55px; font-family: 'Georgia', serif; font-style: italic; font-size: 14px; color: #fff; text-shadow: 1px 1px 1px rgba(20, 39, 53, 0.1); text-align: center; border: 5px solid #162a39; background: rgba(22,42,57,0.5); text-indent: 0px; position: absolute; pointer-events: none; border-radius: 50%; bottom: -40px; opacity: 0; box-shadow: 0px 3px 8px rgba(0,0,0,0.1); -webkit-transform: scale(0.2); -moz-transform: scale(0.2); -o-transform: scale(0.2); -ms-transform: scale(0.2); transform: scale(0.2); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}

.tt-wrapper li a:hover span{ opacity: 0.9; bottom: 50px; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1);}

Siga os passo que ensinei logo á cima,para fazer as mudanças necessárias. Agora no teu html:

<ul class="tt-wrapper">

<li><a class="CLASS QUE COLOCOU NO CSS" href="LINK">TITULO</a></li>

</ul>

Enfim,é isso.

Demo 03

Logo á cima,ensinei o necessário para você poder pessoalizar o seu tooltip,agora vai no seu css e coloque o código á baixo:

.tt-wrapper a{display: block; width: 68px; height: 70px; margin: 0 2px; outline: none; position: relative; z-index: 2; text-indent: -9000px;}

.tt-wrapper li{float: left; list-style-type:none;}

.tt-wrapper li a span{ width: 80px; height: auto; padding: 10px; left: 50%; margin-left: -55px; font-family: 'Alegreya SC', Georgia, serif; font-size: 14px; color: #fff; text-shadow: 1px 1px 1px rgba(255, 155, 106, 0.6); text-align: center; border: 5px solid #ff9b6a; background: rgba(255, 155, 106, 0.5); text-indent: 0px; position: absolute; pointer-events: none; bottom: -40px; opacity: 0; box-shadow: 0px 1px 2px rgba(0,0,0,0.1); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -webkit-transform: rotate(0deg) scale(0); -moz-transform: rotate(0deg) scale(0); -o-transform: rotate(0deg) scale(0); -ms-transform: rotate(0deg) scale(0); transform: rotate(0deg) scale(0);}

.tt-wrapper li a:hover span{ opacity: 0.9; bottom: 100px; -webkit-transform: rotate(-90deg) scale(1); -moz-transform: rotate(-90deg) scale(1); -o-transform: rotate(-90deg) scale(1); -ms-transform: rotate(-90deg) scale(1); transform: rotate(-90deg) scale(1);}

Siga os passo que ensinei logo á cima,para fazer as mudanças necessárias. Agora no teu html:

<ul class="tt-wrapper">

<li><a class="CLASS QUE COLOCOU NO CSS" href="LINK">TITULO</a></li>

</ul>

Enfim,é isso aí.

Demo 04

Finalmente o último tooltip de hoje, e o que mais gosto. Ele é bem parecido com o primeiro que ensinei,daí é só fazer praticamente a mesma coisa do outro, coloque o código abaixo no seu css:

.tt-wrapper li{float: left; list-style-type:none;}

.tt-wrapper{ padding: 0; width: 435px; height: 70px; margin: 80px auto 30px auto;}

.tt-wrapper li a span{ width: 100px; height: auto; line-height: 20px; padding: 10px; left: 50%; margin-left: -64px; font-family: 'Georgia', serif; font-style: italic; font-size: 14px; color: #fff; text-shadow: 1px 1px 1px rgba(240,126,132,0.1); text-align: center; border: 4px solid #f07e84; background: #f07e84; text-indent: 0px; border-radius: 5px; position: absolute; bottom: 70px; opacity: 0; visibility: visible; pointer-events: none; box-shadow: 1px 1px 2px rgba(0,0,0,0.1); -webkit-transform: translate(35px) rotate(25deg) scale(1.5); -moz-transform: translate(35px) rotate(25deg) scale(1.5); -o-transform: translate(35px) rotate(25deg) scale(1.5); -ms-transform: translate(35px) rotate(25deg) scale(1.5); transform: translate(35px) rotate(25deg) scale(1.5); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}

.tt-wrapper li a span:before,

.tt-wrapper li a span:after{ content: ''; position: absolute; bottom: -15px; left: 50%; margin-left: -9px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid rgba(240,126,132,0.1);}

.tt-wrapper li a span:after{ bottom: -14px; margin-left: -10px; border-top: 10px solid #f07e84;}

.tt-wrapper li a:hover span{ visibility: visible; opacity: 0.9; -webkit-transform: translate(0px) rotate(0deg) scale(1); -moz-transform: translate(0px) rotate(0deg) scale(1); -o-transform: translate(0px) rotate(0deg) scale(1); -ms-transform: translate(0px) rotate(0deg) scale(1); transform: translate(0px) rotate(0deg) scale(1);}

Siga os passo que ensinei logo á cima,para fazer as mudanças necessárias. Agora no teu html:

<ul class="tt-wrapper">

<li><a class="CLASS QUE COLOCOU NO CSS" href="LINK">TITULO</a></li>

</ul>

Bom gente, é isso, espero que tenham gostado dos efeitos e tudo mais.

{ 4 comentários cutes ... read them below or Comment }

Unknown16/3/13
ja peguei anjo
bjao
ResponderExcluir
Respostas
mariana dino17/3/13
amore tem post novo de TAG, caso vc ja tenha respondido me mande lá no blog para eu ver:

http://epidemiabeauty.blogspot.com.br/2013/03/tag-hopaholic-viciada-em-compras.html

se ainda nao respondeu, responde tbm, pode ser escrito ou video.
ResponderExcluir
Respostas
Unknown17/3/13
Essas coisas fofas dificilmente a gente encontra.. Parabéns pelo post
annagranado.blogspot.com.br/
ResponderExcluir
Respostas
Lylian Boiteux19/3/13
Linda postagem! Obrigada pelos selinhos! Amei! Beijos, Lylian
ResponderExcluir
Respostas

Adicionar comentário

Carinhas......
♥❤∞ ☆ ★ ✖ ｡◕‿◕｡® ™ ☏✿ﾟ✤
❝❞✥ ✦ ✧ ✩ ✫ ✬ ✭ ✮ ✯ ✰ ✱ ✲ ✳ ❃ ❂ ❁ ❀ ✿✼ ✻ ✺ ✹ ✸ ✷ ₪ ❃ ❂ ❁ ❀ ✿ ✾ ✽ ✼ ✻ ✺ ✹ ✸ ✷
✶ ✵ ✴ ❄ ❅ ❆ ❇ ❈ ❉ ❊ ❋ ❖(◕‿◕✿)　｡◕‿◕｡ ⊱✿◕‿◕✿⊰(◡‿◡✿)(◕〝◕)◑▂◐　◑０◐　◑︿◐　◑ω◐　◑﹏◐　◑△◐　◑▽◐
●▂●　●０●　●︿●　●ω●　●﹏●　●△● ●▽●
⊙▂⊙　⊙０⊙　⊙︿⊙　⊙ω⊙　⊙﹏⊙　⊙△⊙
≡(▔﹏▔)≡
｡◕ ‿ ◕｡ ಠ_ಠ ( °٢° ) ʘ‿ʘ ಥ⌣ಥ ಥ‿ಥ (ΘεΘ;) (n˘v˘•)¬ (✪㉨✪) ヽ(๏∀๏ )ﾉ（╹ェ╹） ╮(─▽─)) ≖‿≖ (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧ (⊙ヮ⊙) ᕦ(ò_óˇ)ᕤ ᕙ(⇀‸↼‶)ᕗ ( ಠ◡ಠ ) (•⊙ω⊙•) ‘︿’ （　´∀｀）☆ (≧ω≦) (´ー｀) (つд｀) (￣。￣) (*~▽~) ( ^▽^)σ)~O~) (=゜ω゜) (´ω｀) (ノ_・。) (-＿- )ノ (´ヘ｀;) (^^;) （　´∀｀） ((((゜д゜;)))) (=ω=;) (。・_・。) (o´ω｀o) (^▽^) (*´д｀*) (￣□￣) ∩(︶▽︶)∩ (✿◠‿◠) (◡‿◡✿) (◕‿◕✿) (✖╭╮✖) (≧◡≦) (¬_¬) (◑‿◐) (◕‿-) ✖‿✖ (-’_’-) (╥_╥) (╯_╰) (╯3╰) (o_-) (¬‿¬) (◣_◢) (∪ ◡ ∪) (≧ω≦) o(≧o≦)o (⋋▂⋌) (॓_॔) (╯ಊ╰) (─‿‿─) ‹(•¿•)› (╯︵╰,) (︶︹︺) (∩︵∩) (｡◕‿◕｡) (⊙_◎) (~￣▽￣)~ (︶ω︶) (+_+) (｡♥‿♥｡) (✿ ♥‿♥) ♥╣[-_-]╠♥ ٩(͡๏̯͡๏)۶ ٩(-̮̮̃•̃)۶ ٩(̾●̮̮̃̾•̃̾)۶ ٩(-̮̮̃-̃)۶ (u_u) (*_*) (º_º) ٩(×̯×)۶ (ñ_ñ) (∩▂∩) (¬▂¬) (╯◕_◕)╯ (╹◡╹)凸少 ¯\_(ツ)_/¯ (▰˘◡˘▰) (☞ﾟ∀ﾟ)☞ ლ(╹◡╹ლ) ヾ(＾∇＾)( ✿ ◠‿◠)

Popular Post

Tooltip Diferentes

{ 4 comentários cutes ... read them below or Comment }

Welcome

Visitinhas online

Cutes

FanPage

Colaboradoras

Me leve com vc

Visitas

Translate

Recadinhos

Participo

Update

Mude o Fundo

Total Pageviews

Status

Labels

Afiliados