Já postei como personalizar o tooltip, aquele texto que aparece quando você passa o mouse sobre algum link, sabe?
Para isso, usa-se um script e Css; o normal é que ele apareça sempre no mesmo lugar, numa posição que permita visualizar direito o conteúdo do tooltip.
Navegando por aí (nesse link <=créditos), encontrei uma forma de se usar o tooltip apenas com Css e aparecendo em qualquer direção, no topo, à direita, esquerda ou abaixo do texto/link, e com tamanhos definidos por quem edita o código. Funciona assim:
Adicione o código abaixo antes de /b:skin no html do seu template:
/** * wenk - Lightweight pure CSS tooltip for the greater good * @version v1.0.0 * (c) 2016 Tiaan du Plessis @mightyCrow | * @link * @license MIT */ [data-wenk] { position: relative /* ===[Tooltip Down]=== */ /* ===[Tooltip Left]=== */ /* ===[Tooltip Right]=== */ /* ===[Length of tooltip]=== */ } /*essa parte personaliza o texto visivel - opcional*/ @import url('https://fonts.googleapis.com/css?family=Delius'); .txtopcional { color: deeppink; font-family: Delius, cursive; font-size: 20px; } /*acima do texto*/ [data-wenk]:after { position: absolute; -webkit-transform: translateX(-50%); transform: translateX(-50%); display: none; font-size: 12px; font-family: 'Delius', cursive; border-radius: 10px; content: attr(data-wenk); padding: 8px; background: #E91E63; color: #fff; width: 150px; line-height: 20px; text-align: center; z-index: 1; pointer-events: none; display: block; opacity: 0; visibility: hidden; -webkit-transition: all .3s; transition: all .3s; bottom: 100%; left: 50%; -webkit-transform: translate(-50%, 10px); transform: translate(-50%, 10px) } [data-wenk]:after { opacity: 0 } [data-wenk]:hover { overflow: visible } [data-wenk]:hover:after { display: block; opacity: 1; visibility: visible; -webkit-transform: translate(-50%, -10px); transform: translate(-50%, -10px) } /*abaixo do texto*/ [data-wenk].wenk--bottom, [data-wenk][data-wenk-pos="bottom"] {} [data-wenk].wenk--bottom:after, [data-wenk][data-wenk-pos="bottom"]:after { bottom: auto; top: 100%; left: 50%; -webkit-transform: translate(-50%, -10px); transform: translate(-50%, -10px) } [data-wenk].wenk--bottom:hover, [data-wenk][data-wenk-pos="bottom"]:hover {} [data-wenk].wenk--bottom:hover:after, [data-wenk][data-wenk-pos="bottom"]:hover:after { -webkit-transform: translate(-50%, 10px); transform: translate(-50%, 10px) } /*a esquerda do texto*/ [data-wenk].wenk--left, [data-wenk][data-wenk-pos="left"] {} [data-wenk].wenk--left:after, [data-wenk][data-wenk-pos="left"]:after { bottom: auto; left: auto; top: 50%; right: 100%; -webkit-transform: translate(10px, -50%); transform: translate(10px, -50%) } [data-wenk].wenk--left:hover, [data-wenk][data-wenk-pos="left"]:hover {} [data-wenk].wenk--left:hover:after, [data-wenk][data-wenk-pos="left"]:hover:after { -webkit-transform: translate(-10px, -50%); transform: translate(-10px, -50%) } /*a direita do texto*/ [data-wenk].wenk--right, [data-wenk][data-wenk-pos="right"] {} [data-wenk].wenk--right:after, [data-wenk][data-wenk-pos="right"]:after { bottom: auto; top: 50%; left: 100%; -webkit-transform: translate(-10px, -50%); transform: translate(-10px, -50%) } [data-wenk].wenk--right:hover, [data-wenk][data-wenk-pos="right"]:hover {} [data-wenk].wenk--right:hover:after, [data-wenk][data-wenk-pos="right"]:hover:after { -webkit-transform: translate(10px, -50%); transform: translate(10px, -50%) } /*tamanho do tooltip*/ [data-wenk][data-wenk-length="small"]:after, [data-wenk].wenk-length--small:after { white-space: normal; width: 80px } [data-wenk][data-wenk-length="medium"]:after, [data-wenk].wenk-length--medium:after { white-space: normal; width: 100px } [data-wenk][data-wenk-length="large"]:after, [data-wenk].wenk-length--large:after { white-space: normal; width: 200px } [data-wenk][data-wenk-length="fit"]:after, [data-wenk].wenk-length--fit:after { white-space: normal; width: 100% }
Personalize:
color: cores dos textos.
font-size e font-family: tamanho e tipo da fonte.
border-radius: borda arredondada do tooltip.
padding: distância interna do texto para as bordas do tooltip.
background: imagem ou cor do plano de fundo do tooltip.
width: largura do tooltip.
text-align: alinhamento do texto no tooltip; no lugar de center, pode ser right ou left.
Para usar o tooltip em algum texto:
<span data-wenk="Texto no topo">Texto</span>
Para escolher direita, esquerda ou abaixo:
<span data-wenk="Texto a direita" data-wenk-pos="right">Direita</span>
<span data-wenk="Texto a esquerda" data-wenk-pos="left">Esquerda</span>
<span data-wenk="Abaixo do texto" data-wenk-pos="bottom">Abaixo</span>
E para definir o tamanho do tooltip (small, medium, large, fit):
<span data-wenk="❤Texto no tooltip" class="wenk-length--small">Tooltip pequeno</span>
<span data-wenk="❤Texto no tooltip" class="wenk-length--medium">Tooltip tamanho médio</span>
<span data-wenk="❤Texto no tooltip" class="wenk-length--large">Tooltip largo</span>
<span data-wenk="❤Texto no tooltip" class="wenk-length--fit">Tooltip do tamanho do texto</span>
E aí pode misturar, por exemplo, tooltip pequeno abaixo do texto, ficaria assim:
<span data-wenk="❤blablabla" data-wenk-pos="bottom" class="wenk-length--small">Abaixo</span>
Também se pode adicionar caracteres especiais no texto que aparece no tooltip, como o ❤ que é um coração, ou você pode copiar os caracteres fornecidos no editor de postagem do Blogger, por exemplo:
<span data-wenk="🎀Tooltip" class="wenk-length--small">Texto</span>
O resultado será assim (passe o mouse sobre os textos)
Tooltip tamanho médio
Tooltip largo
Tooltip do tamanho do texto
Direita
Esquerda
Abaixo
E tem como fazer usando imagem, só que o tamanho nesse caso vai ser só um:
/** * wenk - Lightweight pure CSS tooltip for the greater good * @version v1.0.0 * (c) 2016 Tiaan du Plessis @mightyCrow | * @link * @license MIT */ [data-wenk2] { position: relative /* ===[Tooltip Down]=== */ /* ===[Tooltip Left]=== */ /* ===[Tooltip Right]=== */ /* ===[Length of tooltip]=== */ } /*essa parte personaliza o texto visivel - opcional*/ @import url('https://fonts.googleapis.com/css?family=Delius'); .txtopcional { color: deeppink; font-family: Delius, cursive; font-size: 20px; } /*acima do texto*/ [data-wenk2]:after { position: absolute; -webkit-transform: translateX(-50%); transform: translateX(-50%); display: none; font-size: 12px; font-family: 'Delius', cursive; content: attr(data-wenk2); padding: 0; background: url('URL-DA-IMAGEM'); background-repeat: no-repeat; color: #fff; width: 158px; height: 20px; line-height: 20px; text-align: center; z-index: 1; pointer-events: none; display: block; opacity: 0; visibility: hidden; -webkit-transition: all .3s; transition: all .3s; bottom: 100%; left: 50%; -webkit-transform: translate(-50%, 10px); transform: translate(-50%, 10px) } [data-wenk2]:after { opacity: 0 } [data-wenk2]:hover { overflow: visible } [data-wenk2]:hover:after { display: block; opacity: 1; visibility: visible; -webkit-transform: translate(-50%, -10px); transform: translate(-50%, -10px) } /*abaixo do texto*/ [data-wenk2].wenk--bottom, [data-wenk2][data-wenk2-pos="bottom"] {} [data-wenk2].wenk--bottom:after, [data-wenk2][data-wenk2-pos="bottom"]:after { bottom: auto; top: 100%; left: 50%; -webkit-transform: translate(-50%, -10px); transform: translate(-50%, -10px) } [data-wenk2].wenk--bottom:hover, [data-wenk2][data-wenk2-pos="bottom"]:hover {} [data-wenk2].wenk--bottom:hover:after, [data-wenk2][data-wenk2-pos="bottom"]:hover:after { -webkit-transform: translate(-50%, 10px); transform: translate(-50%, 10px) } /*a esquerda do texto*/ [data-wenk2].wenk--left, [data-wenk2][data-wenk2-pos="left"] {} [data-wenk2].wenk--left:after, [data-wenk2][data-wenk2-pos="left"]:after { bottom: auto; left: auto; top: 50%; right: 100%; -webkit-transform: translate(10px, -50%); transform: translate(10px, -50%) } [data-wenk2].wenk--left:hover, [data-wenk2][data-wenk2-pos="left"]:hover {} [data-wenk2].wenk--left:hover:after, [data-wenk2][data-wenk2-pos="left"]:hover:after { -webkit-transform: translate(-10px, -50%); transform: translate(-10px, -50%) } /*a direita do texto*/ [data-wenk2].wenk--right, [data-wenk2][data-wenk2-pos="right"] {} [data-wenk2].wenk--right:after, [data-wenk2][data-wenk2-pos="right"]:after { bottom: auto; top: 50%; left: 100%; -webkit-transform: translate(-10px, -50%); transform: translate(-10px, -50%) } [data-wenk2].wenk--right:hover, [data-wenk2][data-wenk2-pos="right"]:hover {} [data-wenk2].wenk--right:hover:after, [data-wenk2][data-wenk2-pos="right"]:hover:after { -webkit-transform: translate(10px, -50%); transform: translate(10px, -50%) }
Fica assim:
Direita
Esquerda
Abaixo
Dá até para fazer um menu:
<div style="float: left; width: 45%"> <center> <p><a href="#"><span style="display: inline-block; background: #edfbfd; color: #aef1fa; box-shadow: 1px 2px 3px #8ce7f3; font-family: 'Delius', cursive; font-size: 20px; text-align: center; width: 50px; padding:15px; border-radius: 20px" data-wenk2="❤Texto no topo">Link</span></a></p> <p><a href="#"><span style="display: inline-block; background: #f8edfd; color: #eecbfe; box-shadow: 1px 2px 3px #e5b6fb; font-family: 'Delius', cursive; font-size: 20px; text-align: center; width: 50px; padding:15px; border-radius: 20px" data-wenk2="❤Texto a esquerda" data-wenk2-pos="left">Link</span></a></p> <p><a href="#"><span style="display: inline-block; background: #ffb1cb; color: #ff87b0; box-shadow: 1px 2px 3px #fcc; font-family: 'Delius', cursive; font-size: 20px; text-align: center; width: 50px; padding:15px; border-radius: 20px" data-wenk2="❤Abaixo do texto" data-wenk2-pos="bottom">Link</span></a></p> </center> </div> <div style="float: right; width: 45%"> <center> <p><a href="#"><span style="display: inline-block; background: #edfbfd; color: #aef1fa; box-shadow: 1px 2px 3px #8ce7f3; font-family: 'Delius', cursive; font-size: 20px; text-align: center; width: 50px; padding:15px; border-radius: 20px" data-wenk2="❤Texto no topo">Link</span></a></p> <p><a href="#"><span style="display: inline-block; background: #f8edfd; color: #eecbfe; box-shadow: 1px 2px 3px #e5b6fb; font-family: 'Delius', cursive; font-size: 20px; text-align: center; width: 50px; padding:15px; border-radius: 20px" data-wenk2="❤Texto a direita" data-wenk2-pos="right">Link</span></a></p> <p><a href="#"><span style="display: inline-block; background: #ffb1cb; color: #ff87b0; box-shadow: 1px 2px 3px #fcc; font-family: 'Delius', cursive; font-size: 20px; text-align: center; width: 50px; padding:15px; border-radius: 20px" data-wenk2="❤Abaixo do texto" data-wenk2-pos="bottom">Link</span></a></p> </center> </div>
Troque as "#" por links. Caso queira salvar a imagem do tooltip (eu encontrei esse gif no engrampixel.co.vu):
E é isso!!
Imagem de abertura do post: We❤it.com
Vamos fazer parceria?
ResponderExcluirhttp://milkecookies3.blogspot.com.br/
No momento, as parcerias do blog estão fechadas, mas sinta-se a vontade aqui, estando entre os parceiros/afiliados ou não, será sempre bem-vinda!!!
ExcluirAta msm assim obrigada *-*
Excluir