Estou construindo um efeito Tooltip que exibe as definições de termos específicos, mas estou encontrando problemas ao ter que adicionar uma seta acima da pequena caixinha. Confiram o CSS do código logo seguido pelo HTML abaixo:
CSS
a.tooltip {
position: relative;
padding: 0;
color: #000000;
text-decoration: none;
border-bottom: 1px dotted #133783;
cursor: help;
z-index: 25;
}
a.tooltip:hover {
border: none;
height: auto;
background: transparent;
color: #133783;
z-index: 25;
}
a.tooltip span {
display: none
}
a.tooltip:hover span {
display: block;
position: absolute;
width: 290px;
top: 2em;
right-align: justify;
left: 0;
font: 12px arial, helvetica, sans-serif;
padding: 5px 10px;
border: 1px solid #133783;
background: #E3E3E3;
color: #000;
font: 11px arial, verdana, helvetica, sans-serif;
}
HTML
<a href="#" class="tooltip">HTML<span><strong>HTML:</strong> É uma linguagem de marcação utilizada para produzir páginas na Web. Documentos HTML podem ser interpretados por navegadores.</a>