因此,目前要将工具提示与正确的代码段对齐,我必须手动定义左侧元素,但由于我正在大量使用这些工具提示,因此文本经常更改,这意味着我正在手动更改左侧元素CSS 属性,我尝试了很多方法,似乎都无法找到合适的解决方案?
.ka_menu_tooltip5_1 {
/*display: inline-block;*/
}
.ka_menu_tooltip5_1 .ka_menu_tooltiptext {
visibility: hidden;
width: max-content;
background-color: #29266F;
color: #fff;
text-align: center;
border-radius: 0;
padding: 5px 10px;
position: absolute;
z-index: 1;
top: 110%;
left: 14.2%;
margin-left: -60px;
opacity: 0;
transition: opacity 1s;
font-weight: 100;
}
.ka_menu_tooltip5_1 .ka_menu_tooltiptext::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #29266F transparent;
}
.ka_menu_tooltip5_1:hover .ka_menu_tooltiptext {
visibility: visible;
opacity: 1;
}
<section class="scenario video d-none d-lg-block d-xl-block">
<div class="row">
<div class="col-xs-12 col-sm-10 col-sm-offset-1">
<div class="ka_menu_tooltip5_1">
<a href="./index.html" tabindex="-1">
<span class="ka_dot_5_one_active menu" tabindex="1"></span></a>
<span class="ka_menu_tooltiptext">Introduction</span>
</div>
<hr class="menu_line">
</div>
</div>
</section>