Criar pontas de ferramentas com CSS.
Demo: Exemplos de dica de ferramenta
Uma dica de ferramenta é frequentemente utilizada para especificar informação extra sobre algo quando o utilizador move o ponteiro do rato sobre um elemento:
Tipa de ferramenta básica
Criar uma ponta de ferramenta que aparece quando o utilizador move o rato sobre um elemento:
Exemplo Explicado
O texto da dica de ferramenta é colocado dentro de um elemento em linha (como <span>) com class="tooltiptext".
CSS: O tooltip class use position:relative, que é necessário para posicionar o texto da ponta da ferramenta (position:absolute).Nota: Ver exemplos abaixo sobre como posicionar a dica de ferramenta.
O tooltiptext classe contém o texto da dica de ferramenta actual. Está escondido por defeito, e será visível em pairar (ver abaixo). Acrescentámos-lhe também alguns estilos básicos: largura 120px, cor de fundo preta, cor do texto branco, texto centrado, e acolchoamento superior e inferior de 5px.
O CSS border-radius propriedade é utilizada para adicionar cantos arredondados ao texto da ponta da ferramenta.
O :hover selector é utilizado para mostrar o texto da dica de ferramenta quando o utilizador move o rato sobre o <div> com class="tooltip".
Posicionamento Pontas de ferramentas
Neste exemplo, a ponta da ferramenta é colocada à direita (left:105%) do texto “hoverable” (<div>). Note também que top:-5px é utilizado para o colocar no meio do seu elemento contentor. Utilizamos o número 5 porque o texto da ponta da ferramenta tem um acolchoamento superior e inferior de 5px. Se aumentar o seu acolchoamento, aumente também o valor da propriedade top para garantir que se mantém no meio (se for algo que deseje). O mesmo se aplica se quiser a ponta de ferramenta colocada à esquerda.
Ponta de ferramenta direita
top: -5px;
left: 105%;
}
Resultado:
Experimente você mesmo ”
Left Tooltip
top: -5px;
right: 105%;
}
Resultado:
Try it Yourself ”
Se quiser que a tooltip apareça em cima ou em baixo, veja exemplos abaixo. Note que utilizamos a propriedade margin-left com um valor de menos 60 pixels. Isto é para centrar a dica de ferramenta acima/abaixo do texto que pode pairar. É definido para a metade da largura da ponta da ferramenta (120/2 = 60).
Seta de ferramentas
Para criar uma seta que deve aparecer de um lado específico da ponta da ferramenta, adicionar conteúdo “vazio” após a ponta da ferramenta, com a classe de pseudo-elemento ::after juntamente com a propriedade content. A própria seta é criada usando bordas. Isto fará com que a ponta da ferramenta se pareça com uma bolha de discurso.
Este exemplo demonstra como adicionar uma seta ao fundo da ponta da ferramenta:
Exemplo Explicado
Posicionar a seta dentro da ponta da ferramenta: top: 100% colocará a seta no fundo da ponta da ferramenta. left: 50% centrará a seta.
Nota: A propriedade border-width especifica o tamanho da seta. Se alterar isto, altere também o valor margin-left para o mesmo. Isto manterá a seta centrada.
O border-color é utilizado para transformar o conteúdo numa seta. Definimos a borda superior como preta, e o resto como transparente. Se todos os lados fossem pretos, acabaria com uma caixa quadrada preta.
Este exemplo demonstra como adicionar uma seta ao topo da ponta da ferramenta. Repare que desta vez definimos a cor da margem inferior:
Este exemplo demonstra como adicionar uma seta à esquerda da tooltip:
Este exemplo demonstra como adicionar uma seta à direita da tooltip:
Fade In Tooltips (Animation)
Se quiser desvanecer no texto da tooltip quando está prestes a ser visível, pode usar a propriedade CSS transition juntamente com a propriedade opacity, e passar de completamente invisível a 100% visível, num número de segundos especificados (1 segundo no nosso exemplo):
>br>
>br>