Hover is not being displayed correctly

Asked

Viewed 43 times

1

I have a a without link, only for displaying additional information, but it is not being displayed in the correct way. I wanted it to be shown as follows:

inserir a descrição da imagem aqui

But it is being shown as follows:

inserir a descrição da imagem aqui

Follow the code below HTML and CSS used:

Code HTML:

<a class="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';
}
html css html5 css3

2 answers

2


The mistake was only of CSS, making a simple change to the code will solve the problem. Just change position: relative for position: absolute, in this way, the problem is solved.

Below will only change made in the code CSS:

a.tooltips {
    position: absolute; /* Alteração feita */
    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%;
}

0

Add z-index here:

a.tooltips {
    z-index: 9999;
    ...

Works this way:

inserir a descrição da imagem aqui

  • It didn’t work, it goes on the same way.

  • That gray line on the right is the browser scroll?

  • No, it would be the edge of a div.

  • Do you have the website link? Because the problem is not in the tooltips code, see how it opens normal: https://jsfiddle.net/d1g1nd6s/1/

  • What I find strange, is that I have another tooltips a little more on top of this and it works normally using the same code CSS, but this that is in the question remains with this problem.

  • Have you tried using the element inspector on that white part?

  • Yes, in the white part there is a padding

  • Let’s go continue this discussion in chat.

Show 3 more comments

Browser other questions tagged html css html5 css3

You are not signed in. Login or sign up in order to post.