CSS 不透明度为 1 的工具提示不包含链接

Question

我的网站上出现了工具提示的奇怪问题。

我在其中一个页面中呈现了一个 AJAX 数据表，在某些列下我有一个链接列表当用户将鼠标悬停在它们上面时显示一些信息。现在工具提示背景覆盖相邻文本，但不覆盖相邻链接 - 它们“穿透”背景：

Background covers adjacent text - as expected

Adjacent link penetrates the background

链接的 HTML 元素：

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

我的CSS代码：

.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;
}

所以不透明度为 1，我什至在谷歌搜索类似问题后添加了“重要”标志，但这似乎没有帮助。

Answer 1

将 z-index 添加到您的 .tooltip:before 会有所不同吗？

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

有时 position: absolute 可能真的很时髦，并且与链接或任何默认显示或添加到其中的内容有奇怪的重叠问题。

或者，将 pseudo-selectors (:before) 更改为 pseudo-elements (::before) 也会影响 pop-up.

的功能

CSS 不透明度为 1 的工具提示不包含链接

CSS tooltip with opacity=1 doesn't cover links

html

css

tooltip