Dica de ferramenta CSS

Índice

Crie dicas de ferramentas com CSS.

Demonstração: exemplos de dicas de ferramentas

Uma dica de ferramenta costuma ser usada para especificar informações extras sobre algo quando o usuário move o ponteiro do mouse sobre um elemento:

Dica básica

Crie uma dica de ferramenta que aparece quando o usuário move o mouse sobre um elemento:

Exemplo

<style>
/* Tooltip container */
.tooltip-local {
  position: relative;
    
display: inline-block;
  border-bottom: 1px dotted 
black; /* If you want dots under the hoverable text */
}
/* Tooltip text 
*/
.tooltip-local .tooltiptext {
  visibility: hidden;
  width: 120px;
    
background-color: black;
  color: #fff;
  text-align: center;
    padding: 5px 0;
  
border-radius: 6px;	  
/* Position the tooltip text - see examples below! */
  position: absolute;
    z-index: 1;
}
/* Show 
the tooltip text when you mouse over the tooltip container */
.tooltip-local:hover 
.tooltiptext {
  visibility: visible;
}
</style>
<div class="tooltip-local">Hover 
over me
  <span class="tooltiptext">Tooltip 
text</span>
</div>

Experimente você mesmo →

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>Basic Tooltip</h2>

<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

<p>Note that the position of the tooltip text isn't very good. Go back to the tutorial and continue reading on how to position the tooltip in a desirable way.</p>

</body>
</html>

Exemplo explicado

HTML: Use um elemento contêiner (como <div>) e adicione o "tooltip" classe para ele. Quando o usuário passar o mouse sobre este <div>, será mostrado o texto da dica de ferramenta.

O texto da dica de ferramenta é colocado dentro de um elemento embutido (como <span>) com class="tooltiptext".

CSS: a classe dica de ferramenta usa posição:relativa, que é necessário para posicionar o texto da dica de ferramenta (position:absolute). Nota: Veja exemplos abaixo sobre como posicionar a dica de ferramenta.

A classe tooltiptext contém o texto real da dica de ferramenta. Isso é oculto por padrão e ficará visível ao passar o mouse (veja abaixo). Também adicionamos alguns estilos básicos: largura de 120px, cor de fundo preta, cor de texto branca, texto centralizado e preenchimento superior e inferior de 5px.

A propriedade CSS border-radius é usada para adicionar cantos arredondados à dica de ferramenta texto.

O seletor :hover é usado para mostrar o texto da dica de ferramenta quando o usuário move o passe o mouse sobre <div> com class="tooltip".

Dicas de ferramentas de posicionamento

Neste exemplo, a dica de ferramenta é colocada à direita (left:105%) do "hoverable" texto (<div>). Observe também que top:-5px é usado para colocá-lo no meio de seu elemento contêiner. Usamos o número 5 porque o texto da dica de ferramenta tem um topo e preenchimento inferior de 5px. Se você aumentar seu preenchimento, aumente também o valor da propriedade top para certifique-se de que ele permaneça no meio (se isso for algo que você deseja). O mesmo aplica-se se você quiser que a dica de ferramenta seja colocada à esquerda.

Dica direita

.tooltip-local .tooltiptext {
  top: -5px;
  
left: 
105%; 
}

Resultado:

Experimente você mesmo →

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 105%;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>Right Tooltip</h2>
<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

Dica à esquerda

.tooltip-local .tooltiptext {
  top: -5px;
  
right: 
105%; 
}

Resultado:

Experimente você mesmo →

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: -5px;
  right: 105%;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>Left Tooltip</h2>
<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

Se você quiser que a dica de ferramenta apareça na parte superior ou inferior, veja exemplos abaixo. Observe que usamos a propriedade margin-left com valor menos 60 píxeis. Isso serve para centralizar a dica de ferramenta acima/abaixo do texto que pode ser pairado. Está combinado até a metade da largura da dica de ferramenta (120/2=60).

Dica superior

.tooltip-local .tooltiptext {
  width: 120px;
  
bottom: 100%;
  left: 
50%; 
  margin-left: -60px; /* Use half of the width 
(120/2 = 60), to center the tooltip */
}

Resultado:

Experimente você mesmo →

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>Top Tooltip</h2>
<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

Dica inferior

.tooltip-local .tooltiptext {
  width: 120px;
  top: 100%;
  left: 
50%; 
  margin-left: -60px; /* Use half of the width 
(120/2 = 60), to center the tooltip */
}

Resultado:

Experimente você mesmo →

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  margin-left: -60px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>Bottom Tooltip</h2>
<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

Setas de dica de ferramenta

Para criar uma seta que deve aparecer em um lado específico da dica de ferramenta, adicione "vazio" conteúdo depois dica de ferramenta, com a classe de pseudoelemento ::after junto com o content propriedade. A seta em si é criada usando bordas. Isso fará com que a dica de ferramenta parece um balão de fala.

Este exemplo demonstra como adicionar uma seta na parte inferior da dica de ferramenta:

Seta inferior

.tooltip-local .tooltiptext::after {
  content: " ";
  position: absolute;
    top: 100%; 
/* At the bottom of the tooltip */
  left: 50%;
  margin-left: -5px;
    
border-width: 5px;
  border-style: solid;
  
border-color: black transparent transparent transparent;
}

Resultado:

Experimente você mesmo →

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -60px;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>Top Tooltip w/ Bottom Arrow</h2>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

Exemplo explicado

Posicione a seta dentro da dica de ferramenta: top: 100% colocará a seta no parte inferior da dica de ferramenta. esquerda: 50% centralizará a seta.

Nota: A propriedade border-width especifica o tamanho do seta. Se você alterar isso, altere também o valor margin-left para o mesmo. Esse manterá a seta centralizada.

A border-color é usada para transformar o conteúdo em uma seta. Nós definimos o borda superior para preto e o restante para transparente. Se todos os lados fossem pretos, você acabaria com uma caixa quadrada preta.

Este exemplo demonstra como adicionar uma seta ao topo da dica de ferramenta. Observe que desta vez definimos a cor da borda inferior:

Seta para cima

.tooltip-local .tooltiptext::after {
  content: " ";
  position: absolute;
  bottom: 100%;  /* At the top of the tooltip */
    left: 50%;
  margin-left: -5px;
  
border-width: 5px;
  border-style: solid;
  
border-color: transparent transparent black transparent;
}

Resultado:

Experimente você mesmo →

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 150%;
  left: 50%;
  margin-left: -60px;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>Bottom Tooltip w/ Top Arrow</h2>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

Este exemplo demonstra como adicionar uma seta à esquerda da dica de ferramenta:

Seta esquerda

.tooltip-local .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 50%;
    right: 100%; /* To the left of the tooltip 
*/
  margin-top: -5px;
  
border-width: 5px;
  border-style: solid;
  
border-color: transparent black transparent transparent;
}

Resultado:

Experimente você mesmo →

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 110%;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>Right Tooltip w/ Left Arrow</h2>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

Este exemplo demonstra como adicionar uma seta à direita da dica de ferramenta:

Seta direita

.tooltip-local .tooltiptext::after {
  content: " ";
  position: absolute;
    top: 50%;
  left: 100%; /* To the right of the 
tooltip */
  margin-top: -5px;
  
border-width: 5px;
  border-style: solid;
  
border-color: transparent transparent transparent black;
}

Resultado:

Experimente você mesmo →

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: -5px;
  right: 110%;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent black;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>Left Tooltip w/ Right Arrow</h2>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

Dicas de ferramentas de fade in (animação)

Se você quiser esmaecer o texto da dica de ferramenta quando ele estiver prestes a ficar visível, você pode usar a propriedade CSS transition junto com a opacity propriedade e passar de completamente invisível a 100% visível, em um número especificado de segundos (1 segundo em nosso exemplo):

Exemplo

.tooltip-local .tooltiptext {
  opacity: 0;
  
transition: opacity 1s;
}
.tooltip-local:hover 
.tooltiptext {
  opacity: 1;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
  
  /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
  opacity: 0;
  transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
</style>
<body style="text-align:center;">

<h2>Fade In Tooltip on Hover</h2>
<p>When you move the mouse over the text below, the tooltip text will fade in and take 1 second to go from completely invisible to visible.</p>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>