html - 显示在其他元素下方的工具提示 z-index

Question

所以我目前在将鼠标悬停在某些导航元素上时会显示工具提示，但是当工具提示确实显示在鼠标悬停在其上的元素上时，它会显示在所有其他元素的下方。(抱歉，如果不清楚，它是导航栏...所以链接 1 的工具提示在顶部有链接 2 的文本，使其不可读)我已经尝试更改不同元素的 z-index(如前一个答案中所建议的)并且我要么尝试将其更改为“data-toggle='tooltip'”的标准引导方法，但此方法似乎无法正确呈现 html(即使使用 razer @Html.Raw())。

<li class="nav-item tooltip">
<a class="nav-link active" href="#"><i class="fal fa-file-alt"></i>  <span>INVOICES</span></a>
<span class="tooltiptext" data-placement="top">@Html.Raw(UIMessages.TTSignUp)</span>
</li>

<li class="nav-item tooltip">
<a class="nav-link active" href="#"><i class="fal fa-pound-sign"></i><span>EXPENSES</span></a>
<span class="tooltiptext">@Html.Raw(UIMessages.TTSignUp)</span>
</li>

<li class="nav-item tooltip">
<a class="nav-link active" data-toggle="tooltip" title="@Html.Raw(UIMessages.TTSignUp)" href="#"><i class="fal fa-pound-sign"></i><span>PENSION</span></a>
<span class="tooltiptext">@Html.Raw(UIMessages.TTSignUp)</span>
</li>

我的 css/scss...

.tooltip {
    position: relative;
    display: inline-block;
    opacity: 1 !important;


}


.toptip span {
    z-index: 9999999;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 400px;
    background-color: $TrigDarkBlue;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 10px 10px 10px 10px;
    /* Position the tooltip */
    position: absolute;

    top: -5px;
    left: 5%;

    a {
        color: $TrigBlue;
    }
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    z-index: 99999;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 20px;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent $TrigDarkBlue transparent transparent;
    z-index: 9999
}

所以我认为这就像更改“.tooltiptext”的 z-index 一样简单，但显然不是。任何帮助将非常感激。

干杯

Answer 1

需要设置position: absolute or fixed

toptip span { 
    z-index: 9999999;
    position: absoulute;
}