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

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

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

工具提示的Z索引显示在其他元素下方

2 个答案: