Подсказка z-index, отображаемая под другими элементами - PullRequest
Новая
       15

Подсказка z-index, отображаемая под другими элементами

0 голосов
/ 19 февраля 2019

Таким образом, в настоящее время у меня есть всплывающая подсказка, отображаемая при наведении курсора на некоторые элементы навигации, однако, хотя подсказка отображается на элементе, над которым находится указатель мыши, отображается под всеми остальными элементами. (Извините, если неясно, это навигацияbar ... так что подсказка ссылки 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
}

Так что я подумал, что это будет так же просто, как просто изменить z-индекс '.tooltiptext', но явно нет.Любая помощь приветствуется.

Приветствия

Ответы [ 2 ]

0 голосов
/ 19 февраля 2019

Используйте этот код ниже ... Я должен добавить 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>
0 голосов
/ 19 февраля 2019

Вам необходимо установить положение: абсолютное или фиксированное 

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