Como criar um componente tooltip(balão de dica) utilizando apenas CSS (passo a passo)

Um tooltip é um componente muito comum em aplicações WEB, pois trazem uma ótima experiência de usuário.

O tooltip é um componente overlay, isso é, aparece sobre(por cima) da página ou do componente principal e é um elemento não interativo que serve para fornecer informações extras ao usuário.

Por exemplo, passando o mouse sobre essa parte do texto, você verá um texto que não estava visível anteriormente.

Isso ocorre pois o tooltip é um componente que é oculto(hidden) por padrão, e se torna visível(unhidden) apenas quando o usuário está com o mouse sobre ele(estado esse que é denominado hovered).

É uma boa prática não utilizar um tooltip para substituir alguma informação importante ou indispensável para o usuário, a lógica é que seja possível utilizar o sistema sem ativá-lo.

Por exemplo, abaixo temos dois formulários, o da esquerda utiliza o tooltip corretamente, enquanto o da direita utiliza incorretamente:

Criando um tooltip

HTML

Na parte do HTML podemos utilizar qualquer tag, no exemplo, utilizarei a tag <span> apenas por ser uma tag sem valor semântico(caso não saiba oque isso significa, leia esse artigo sobre HTML semântico).

<span>exemplo</span>

Adicionaremos a classe tooltip a esse elemento:

<span class="tooltip">exemplo</span>

E como será definido o conteúdo(texto) desse balão de dica? Temos algumas opções:

• Criar uma classe diferente para cada tooltip do site e utilizar a propriedade content.
• Utilizar os atributos de data presente no HTML5.

Seguirei pela segunda opção por ser mais versátil. Para isso basta adicionar um atributo chamado data-tooltip na tag com a classe tooltip.

Obs: Pode ser utilizado qualquer nome para esse atributo, desde que se inicie com data-.

<span class="tooltip" data-tooltip="Exemplo!">exemplo</span>

E no HTML isso é tudo que precisamos.

CSS

Primeira coisa que faremos no CSS é estilizar o contêiner da classe tooltip:

.tooltip {
    position: relative;
    border-bottom: 1px dashed #000;
}

Oque cada parte do código faz:

• position: relative: Faz a tag com a classe tooltip um contêiner para o texto.
• border-bottom: 1px dashed #000: Faz uma indicação tracejada na parte inferior do elemento para indicar ao usuário que se trata de um elemento que exibe mais informações caso ele posicione o mouse sobre.

Agora podemos estilizar o balão propriamente dito:

.tooltip:before {
    content: attr(data-text);

    position: absolute;

    bottom: 50%;
    margin-bottom: 15px;

    left: 50%;
    transform: translateX(-50%);


    width: 200px;
    padding: 10px;
    border-radius: 10px;
    background: #000;
    color: #fff;
    text-align: center;

    display: none;
}

Oque cada parte do código faz:

• content: attr(data-text): Extrai o texto do atributo data-tooltip e coloca como o conteúdo do componente.
• position: absolute: Apenas para podermos posicionar o componente com mais flexibilidade.
• bottom: 50% e margin-bottom: 15px: Posiciona o balão acima da tag original(15px acima).
• left: 50% e transform: translateX(-50%): Alinha o balão horizontalmente com a tag original.
• width: 200px, padding: 10px, border-radius: 10px, background: #000, color: #fff e text-align: center: Faz a estilização do balão.
• display: none: Faz o tooltip oculto por padrão.

E para fazer o tooltip visível quando o mouse estiver sobre a tag marcada com a classe tooltip utilizaremos a propriedade hover do css.

.tooltip:hover:before {
    display: block;
}

Esse código apenas altera o diplay de hidden para block quando o usuário estiver com o mouse sobre o elemento.

Pronto, nesse momento já temos um tooltip utilizável.

Algo simples que traz uma melhor estética e de usabilidade ao componente é adicionar uma seta apontando para a origem do balão.

Isso pode ser feito com o pseudo-elemento after:

.tooltip:after {
    content: "";
    position: absolute;

    bottom: 50%;
    margin-bottom: 5.3px;

    left: calc(50% - 10px);
    transform: translateX(-50%);
    rotate: 270deg;

    border: 10px solid;
    border-color: transparent black transparent transparent;

    display: none;
}

Oque cada parte do código faz:

• content: "": Deixa o conteúdo do elemento em branco, sem texto.
• position: absolute: Apenas para podermos posicionar o componente com mais flexibilidade.
• bottom: 50% e margin-bottom: 5.3px: Posiciona a seta acima da tag original, porém abaixo do balão de dica.
• left: calc(50% - 10px) e transform: translateX(-50%): Alinha o balão horizontalmente com o balão.
• rotate: 270deg: Faz a rotação do elemento em 270deg para montar uma seta apontando para baixo.
• border: 10px solid e border-color: transparent black transparent transparent: Estiliza a seta.
• display: none: Faz a seta oculta por padrão.

Agora basta alterar o trecho de código que faz o tooltip visível para também tornar visível a seta:

.tooltip:hover:before, .tooltip:hover:after {
    display: block;
}

Conclusão

Nesse artigo você viu uma forma simples de fazer um tooltip utilizando apenas CSS puro, sem frameworks e até sem utilizar javascript.

O código ficou simples de ser entendido e replicado, também é muito fácil alterá-lo para se encaixar melhor no seu uso, posicionando o balão em outra posição, aumentado ou diminuindo sua opacidade e coisas do tipo.

O código CSS final está abaixo:

.tooltip {
    position: relative;
    border-bottom: 1px dashed #000;
}

.tooltip:before {
    content: attr(data-text);

    position: absolute;

    bottom: 50%;
    margin-bottom: 15px;

    left: 50%;
    transform: translateX(-50%);


    width: 200px;
    padding: 10px;
    border-radius: 10px;
    background: #000;
    color: #fff;
    text-align: center;

    display: none;
}

.tooltip:after {
    content: "";
    position: absolute;

    bottom: 50%;
    margin-bottom: 5.3px;

    left: calc(50% - 10px);
    transform: translateX(-50%);
    rotate: 270deg;

    border: 10px solid;
    border-color: transparent black transparent transparent;

    display: none;
}

.tooltip:hover:before, .tooltip:hover:after {
    display: block;
}

O HTML final:

<span class="tooltip" data-tooltip="Exemplo!">exemplo</span>