Tooltip em Todas as Direções

sexta-feira, dezembro 16, 2016

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:

Texto

Para escolher direita, esquerda ou abaixo:

Direita
Esquerda
Abaixo

E para definir o tamanho do tooltip (small, medium, large, fit):

Tooltip pequeno
Tooltip tamanho médio
Tooltip largo
Tooltip do tamanho do texto

E aí pode misturar, por exemplo, tooltip pequeno abaixo do texto, ficaria assim:

Abaixo

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:

Texto

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:

Link
Link
Link

 <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

Tutoriais

Roberta

Oi. Sou a autora do Reino Kawaii, um blog em que compartilho um pouco de quase tudo que gosto com estilo bem fofo, desde coisas que desenho, edito ou personalizo, até downloads, tutoriais e música. Saiba mais sobre mim e o blog aqui => reinokawaii.blogspot.com/p/about.html

3 Comments

Anônimo16 dezembro
Vamos fazer parceria?
http://milkecookies3.blogspot.com.br/
ResponderExcluir
Respostas

Adicionar comentário

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

Tooltip em Todas as Direções

3 Comments

Welcome

Seguidores

Social

Facebook

Categories

Créditos

Roberta

Tooltip em Todas as Direções

Related Articles

3 Comments

Welcome

Seguidores

Social

Facebook

Categories

Créditos

Roberta