Blog do MX Cursos

Aprenda a criar tooltip usando CSS3

Aprenda a criar tooltip usando CSS3

O CSS na formação da tríade (HTML, CSS, Javascript), tem como objetivo a estilização de páginas. Definições de cores, dimensões, posicionamento. Para qualquer tipo de animação, precisávamos recorrer ao Javascript.

A partir do CSS3 passou a ser possível realizar animações e manipulações apenas utilizando o CSS. Antes também era possível, por exemplo, usando apenas a pseudo-classe :hover, mas isso se apresentava de forma mais “seca”, não criando um efeito suavizado que queremos muitas vezes apresentar.

No tutorial a seguir, as propriedades responsáveis pelo feito serão Transition e Transform.

Introdução às Propriedades

Antes de começar o tutorial em si, é interessante falar um pouco sobre as propriedade que serão utilizada no decorrer do texto.

Como informado acima, determinados efeitos são mostrados de forma mais “seca” e para conseguir essa “suavização”, temos a propriedade Transition.

Essa propriedade irá calcular o tempo de mudança de uma ação à outra utilizando o :hover.

Com  a Transition você consegue configurar o que será animado (transition-property), a duração do efeito (transitionduration), a progressão da transição (transitiontimingfunction) e o tempo da transição (transitiondelay).

Você consegue utilizar essas propriedades de forma única, da mesma forma que background usando apenas transition.

Nossos cursos indicados

Outra propriedade, só que voltada para modificação do elemento, é a Transform.

Com esta propriedade você modificará a forma de um elemento, como dimensão (scale), mover para o eixo x e y (translation), modificar ângulos (skew) e rotacionar o elemento (rotate).

 Navegadores

No decorrer do tutorial, serão utilizados os prefixos. Ele são usados por que alguns navegadores realizam suas implementações das propriedades que as vezes ainda são rascunhos na W3C.

Você tem prefixo pra Chrome e Opera (-webkit-), para o Internet Explorer (-ms-) e para Mozilla Firefox  (-mo-). Sempre ao utilizar os prefixos, deixe a propriedade sem o prefixo por último para garantir o funcionamento nos navegadores que já tenham esta propriedade por padrão.

Vamos ao tutorial

O tooltip ou “dica de contexto” é muito utilizado quando você deseja mostrar informações adicionais ou explicativa a um elemento na página. Basicamente o seu funcionamento consiste ao passar o mouse nesse elemento, aparecendo assim uma determinada mensagem.

Nossa estrutura de arquivos e pastas ficará da seguinte forma:

folder-tooltip

Agora iremos definir as marcações no index.html.

<!doctype html>
<html lang="pt-br">
    <head>
        <title>Tooltip com CSS 3</title>
        <meta charset="UTF-8">
         <link rel="stylesheet" type="text/css" href="https://necolas.github.io/normalize.css/4.1.1/normalize.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
     </head>
    <body>
        <header></header> 
        <ul id="shared">
            <li class="facebook"><a href="#"><span>Facebook</span></a></li>
            <li class="twitter"><a href="#"><span>Twitter</span></a></li>
            <li class="email"><a href="#"><span>Email</span></a></li>
        </ul> 
    </body>
</html>

Explicando o código acima.

  • Na linha 6, chama o normalize.css para padronizar as tags;
  • Na linha 7, chama o arquivo style.css que irá conter a estilização;
  • Na linha 10, define a tag header apenas pra ter uma espaçamento que será definido no CSS;
  • Na linha 11 a 15, define uma lista não ordenada com os itens. Veja que dentro do link de cada item da lista tem um span que será exibido ao passar o mouse;

Agora iremos ao style.css.

body{
    background:#e5e5e5;
}
header{
    height: 100px;
	background:#ccc;
}
#shared {
    list-style:none;
	text-align:center;
}
#shared li{
   display: inline-block;   	
} 
#shared li a{
	display: inline-block;        
	width:65px;
    height: 60px;
    position: relative;
    background:url(../images/sprite.png) no-repeat;  
}
#shared li.facebook a{
    background-position: 0 0;
} 
#shared li.twitter a{
    background-position: 0 -61px;
} 
#shared li.email a{
    background-position: 0 -121px;
} 
#shared li a span{
    position: absolute; 
    width:100px;
    height:100px;
    bottom:-60px;
    left:50%;
    margin-left: -50px;
    border-radius: 50%;
    opacity: 0;
    background: rgba(255,255,255,0.5);
    color:#333;
    font-size:12px;
    font-weight: bold;
    text-align: center;
    line-height: 100px;
    border:1px solid #ccc; 
    -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: scale(0.1);
    -moz-transform: scale(0.1);
    -o-transform: scale(0.1);
    -ms-transform: scale(0.1);
    transform: scale(0.1);
}
#shared li a:hover span{
    bottom:60px;
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

Explicando o código acima.

  • Na linha 1 a 3, seleciona a tag body para definir uma cor de fundo;
  • Na linha 4 a 7, seleciona a tag header que define uma altura e uma cor de fundo;
  • Na linha 8 a 11, seleciona a lista não ordenada #shared, retira o bullet e define que o texto dentro desse bloco será centralizado;
  • Na linha 12 a 14, define a forma que será renderizada o elemento da lista, o inline-block que será definido para que os itens fiquem lado a lado;
  • Na linha 15 a 21, define as configurações do link como display:inline-block, uma largura e altura, posição relativa e a imagem com os ícones;
  • Na linha 22 a 30, define a posição da imagem que adicionamos nos links. Essa técnica tem nome de CSS Sprite, onde agrupamos várias imagens e uma única imagem para serem exibidas apenas mudando o background-position;
  • Na linha 31 a 57, define a forma que será exibido o tooltip:
    • Define uma posição absoluta em relação ao elemento pai;
    • Define uma largura(width) e altura(height);
    • Define um bottom:-60px para fazer o efeito do tooltip está subindo;
    • Define left:50% e margin-left:-50px para centralizar na horizontal;
    • Define border-radius:50% pra transformar o elemento em um circulo;
    • Define opacity:0  para ocultar o elemento;
    • Define background, usando rgba, pois assim podemos definir o alfa, deixando a cor transparente;
    • Define a cor do texto;
    • Define tamanho da fonte (font-size) e coloca ela em negrito (font-weigth);
    • Centraliza o texto;
    • Define o line-height da mesmo tamanho da altura para centralizar o texto na vertical;
    • Define um borda;
    • Define o efeito transition :
      • all => total as propriedades;
      •  0.3 => tempo da transição;
      • ease-in-out => a forma da transição
    • Define o transform usando scale pra diminuir a dimensão do span. voltaremos ao tamanho natural após passar o mouse.
  • Na linha 58 a 66, configura a exibição do tooltip ao passar o mouse no elemento da lista não ordenada:
    • Define bottom:60px para ficar acima do ícone;
    • Define opacity:1 para mostrar o tooltip;
    • Define o transform com scale(1) para voltar o tamanho normal;

Veja o efeito como fica:

https://blog.mxcursos.com/exemplos/tooltip/

Para baixar os arquivos:

https://github.com/davidchc/tutorial-tooltip-css3

Durante o tutorial também utilizamos outras propriedades do CSS3, como border-radius e também usamos o rgba, para colocar um valor de opacidade (alfa), mas preferimos dá um foco no Transition e Transform devido à realização do efeito esperado.

Espero que tenham gostado.

Abraços e até a próxima.

 

O MX Cursos já está na Black Friday.