显示在其他元素下方的工具提示 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

需要设置位置：绝对或固定

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

Answer 2

使用下面的代码...我必须在 .tooltip .tooltiptext 类上添加 bottom: -38px;

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


}


.toptip span {
    z-index: 9999999;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 400px;
    background-color: red;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 10px 10px 10px 10px;
    position: absolute;
    bottom: -38px;
    left: 0;

    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
}

        <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>