工具提示控件

Question

我使用的是bootstrap库

我想用tooltip作为我设计的滑块。

要在slider中使用tooltip，我需要创建特殊的条件。

在简介:

我希望当用户hovers在其中一张幻灯片上时不显示tooltip，并且只显示z-index等于1的幻灯片的tooltip。

请帮我完成我写的脚本代码。

$(function () {
$('[data-toggle="tooltip"]').tooltip();
});

$("li").each(function () {
if ($(this).css("z-index") == 1) {
$("div.tooltip").css("display", "block");
} else {
$("div.tooltip").css("display", "none");
}
});
$("li").each(function () {
if ($(this).css("z-index") == 0) {
$("div.tooltip").css("display", "none");
}
});

ul.body-slider {
display: flex;
justify-content: center;
margin-top: 10rem;
list-style: none;
position: relative;
}
.body-slider li.slide {
position: absolute;
top: 0;
}
.body-slider li.slide a {
display: block;
width: 250px;
height: 200px;
box-shadow: 0 0 6px #000;
margin: 20px;
padding: 10px;
background: #eb00ff;
border-radius: 10px;
text-align: center;
font-size: 30px;
text-decoration: none;
}
.body-slider li.num-1 a,
.body-slider li.num-3 a {
background: #51ff00;
width: 200px;
height: 150px;
}

.body-slider li.num-1 {
top: 25px;
left: 0;
z-index: 0;
}
.body-slider li.num-3 {
top: 25px;
right: 0;
z-index: 0;
}
.body-slider li.num-2 {
z-index: 1;
}

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<section>
<div class="main-slider">
<ul class="body-slider">
<li class="slide num-1">
<a href="#"
title="Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit mollitia voluptatem saepe odio incidunt, earum fuga ea placeat et laudantium!"
data-toggle="tooltip" data-placement="top">slide #1</a>
</li>
<li class="slide num-2">
<a href="#"
title="Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit mollitia voluptatem saepe odio incidunt, earum fuga ea placeat et laudantium!"
data-toggle="tooltip" data-placement="top">slide #2</a>
</li>
<li class="slide num-3">
<a href="#"
title="Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit mollitia voluptatem saepe odio incidunt, earum fuga ea placeat et laudantium!"
data-toggle="tooltip" data-placement="top">slide #3</a>
</li>
</ul>
</div>

</section>

Answer 1

首先，我应该提到Jquery不再被推荐，如果它还没有被淘汰的话，它即将被淘汰。所以如果你把你的项目更新到BootStrap v5并使用纯js代码而不是jquery，那就更好了。然而，我认为这是你正在寻找的代码:

$(function () {
$('[data-toggle="tooltip"]').tooltip();
$("ul").children('li').each(function (i) {
if ($(this).css("z-index") == 1) {
$($(this).children()[0]).tooltip('enable')
} else {
$($(this).children()[0]).tooltip('disable')
}
});
});

不要改变你的HTML和CSS代码，只需替换这些代码与你的脚本