Tooltip com CSS

28/05/2018

Nessa vídeo-aula aprenderemos como fazer uma Tooltip, aqueles balãozinhos com dicas a respeito de textos ou formulários. Para isso, utilizaremos HTML5 e CSS.

Criando a div da Tooltip no HTML5

Vamos criar duas divs: Dica que será o container e DicaTexto que receberá o texto do balão.

<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <title>Tooltip com CSS</title>
    <link rel="stylesheet" href="Stylesheet.css">
</head>

<body>
    <div class="Dica">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam aut doloremque, ea impedit iusto quaerat ullam. Accusamus aspernatur ducimus eligendi exercitationem ipsam magnam minus, odit officia pariatur sed sunt, voluptatibus.
        <div class="DicaTexto">Informações sobre o texto</div>
    </div>

    <div class="Dica">
        <input type="text">
        <div class="DicaTexto">Preencha seu nome</div>
    </div>
</body>

</html>

Estilizando a Tooltip no CSS

O CSS será responsável por fazer a mágica de aparecer o balão quando o mouse passar sobre o conteúdo desejado.

*{margin: 0; box-sizing: border-box;}

.Dica{position: relative; margin: 30px; display: inline-block;}
    .Dica:hover .DicaTexto{visibility: visible;}

.DicaTexto{position: absolute; visibility: hidden; font-size: 13px; width: 200px; background: black; color:#fff; text-align: center; padding: 5px  0; border-radius: 6px; bottom: 100%; left: 50%; margin-left: -100px; margin-bottom: 5px;}
    .DicaTexto:after{content: " "; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #000 transparent transparent transparent;}

Até a próxima!

Receba as aulas da Webdesign em Foco em Seu Email

Posts Relacionados

Alinhando div com HTML5 e CSS

Neste vídeo aprenderemos com alinhar horizontalmente e verticalmente divs flutuantes utilizando para isso HTML5 e CSS.

Efeitos com Animate CSS

Nesse tutorial aprenderemos como fazer animações simples utilizando o Animate.css. Aprenderemos a fazer animações com CSS puro e utilizando javascript.

CSS

As folhas de estilo em cascata (CSS) são responsáveis pela estilização e design do nosso website.