I have a a
no link, only for the display of additional information, but it is not being displayed correctly. I wanted it to be displayed as follows:
However,itisdisplayedasfollows:
BelowisthecodeHTML
andCSS
used:
CodeHTML
:
<aclass="tooltips"><strong>!</strong><span class="spanTooltips">Ingresse o máximo de informações possíveis para uma entrega acertiva</span></a>
Code CSS
:
a.tooltips {
position: relative;
display: inline-block !important;
vertical-align: middle;
font-size: 14px;
color: #fff !important;
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;
}
a.tooltips span {
position: absolute;
width: 140px;
color: #FFFFFF !important;
background: #E7AF19;
padding: 5px 0;
height: auto;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 3px;
}
a:hover.tooltips span {
visibility: visible;
opacity: 1;
bottom: 30px;
left: 50%;
margin-left: -70px;
z-index: 999;
line-height: 16px;
font-size: 14px;
font-family: 'CoHeadlineCorp-Light';
}