所以我目前有一个工具提示,当将鼠标悬停在某些导航元素上时,虽然工具提示确实显示在该元素上,但是鼠标悬停在该元素上时,它显示在所有其他元素的下面。(对不起,这是一个导航栏...因此,链接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一样简单,但显然没有。任何帮助将非常感激。
欢呼声
答案 0 :(得分:0)
您需要设置位置:绝对位置或固定位置
toptip span {
z-index: 9999999;
position: absoulute;
}
答案 1 :(得分:0)
使用下面的代码...我已经在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>