Eu tenho o seguinte código html abaixo:
<a class="tooltips" href="#"><strong>!</strong><span>Ingresse o máximo de informações possíveis para uma entrega acertiva</span></a>
Com os seguintes códigos CSS
:
a.tooltips {
position: relative;
display: inline-block;
vertical-align: middle;
font-size: 14px;
color: #fff;
margin-left: 5px;
background: #E7AF19;
padding: 1px 10px;
text-align: center;
border-radius: 50%;
}
a.tooltips span:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
width: 0;
height: 0;
border-top: 8px solid #E7AF19;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
Juntando os dois códigos, ele forma um pequeno circulo para mostrar informações ao usuário, onde o mesmo deveria ser exibido no hover
, mas não está funcionando. Creio eu que está faltando alguma função em javascript
ou em jQuery
para que o mesmo seja exibido, porém não sei como fazer para que no hover
, o texto contido dentro do span
seja exibido.
Exemplo: