CSS tooltip with opacity=1 doesn't cover links-CodePudding

I'm facing a weird issue with tooltip in my website.

I render an AJAX datatable in one of the pages, and under some column I have a list of links which show some info when the user hovers over them. Now the tooltip background covers adjacent text, but not adjacent links - they "penetrate" the background:

Background covers adjacent text - as expected

Adjacent link penetrates the background

Links' HTML element:

<a  href="http://some.url.com/browse/${dmpItem["id"]}" target="_blank" data-text="${dmpItem["name"]}">${dmpItem["id"]}</a> - ${dmpItem["status"]}

My CSS code:

.tooltip {
    position:relative;
}

.tooltip:before {
    content: attr(data-text);
    position: absolute;
    top: 160%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    padding: 5px 10px 5px 10px;
    border-radius: 10px;
    background: #323254;
    color: #dadae0;
    text-align: center;

    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-in-out;
}

.tooltip:after {
    content: "";
    position:absolute;
    top: 80%;
    left: 50%;
    transform: translateX(-50%);
    border:10px solid;
    border-color: transparent transparent #323254 transparent;

    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-in-out;
}

.tooltip:hover:before, .tooltip:hover:after {
    opacity: 1 !important ;
    visibility: visible;
}

So opacity is 1 and I even added the "important" flag after googling similar issues, but it doesn't seem to help.

CodePudding user response：

Would adding z-index to your .tooltip:before make a difference?

.tooltip:before, .tooltip:after {
  z-index: 9;
}

Sometimes position: absolute can be really funky and have strange overlapping problems with things like links, or anything that has display: inline as its default or added to it.

Alternatively, changing the pseudo-selectors (:before) to pseudo-elements (::before) could also impact the functionality of the pop-up.