Tooltip em Todas as Direções


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="&#10084;Texto no tooltip" class="wenk-length--small">Tooltip pequeno</span>
<span data-wenk="&#10084;Texto no tooltip" class="wenk-length--medium">Tooltip tamanho médio</span>
<span data-wenk="&#10084;Texto no tooltip" class="wenk-length--large">Tooltip largo</span>
<span data-wenk="&#10084;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="&#10084;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 &#10084; 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 pequeno e no topo
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:
Topo
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="&#10084;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="&#10084;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="&#10084;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="&#10084;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="&#10084;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="&#10084;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






Postar um comentário

3 Comentários

  1. Anônimo16 dezembro

    Vamos fazer parceria?
    http://milkecookies3.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. 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!!!

      Excluir
    2. Anônimo20 dezembro

      Ata msm assim obrigada *-*

      Excluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart

up