基于lightSlider实现指定位置图片与列表项悬停Tooltip方案咨询

你完全可以仅通过CSS配合少量HTML属性调整实现这个需求，不需要额外复杂的JavaScript（除非你需要动态加载Tooltip内容）。下面是具体的实现步骤和代码示例：

步骤1：给图片项添加Tooltip文本 #

我们给每个<li>元素加上data-tooltip属性，用来存储Tooltip的显示内容，这样不需要额外插入DOM元素，更简洁：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.3/css/lightslider.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.3/js/lightslider.min.js"></script>
<div class="demo">
<ul id="lightSlider">
<li data-tooltip="雪山风景主图" data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-1.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg" alt="">
</li>
<li data-tooltip="湖泊风景主图" data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-2.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg" alt="">
</li>
<!-- 其他li元素同理添加data-tooltip属性 -->
<li data-tooltip="森林风景主图" data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-13.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-13.jpg" alt="">
</li>
</ul>
</div>

步骤2：编写CSS实现Tooltip的定位与显示 #

利用CSS伪元素、:hover伪类和绝对定位，我们可以分别控制主图和缩略图的Tooltip位置：

.demo { width: 420px; }
ul { list-style: none outside none; padding-left: 0; margin-bottom: 0; }
li { 
    display: block; 
    float: left; 
    margin-right: 6px; 
    cursor: pointer; 
    position: relative; /* 为绝对定位的Tooltip提供参考坐标系 */
}
img { display: block; height: auto; max-width: 100%; }

/* 基础Tooltip样式：默认隐藏 */
li::before {
    content: attr(data-tooltip); /* 读取data-tooltip的内容作为文本 */
    position: absolute;
    background: rgba(0,0,0,0.8);
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease; /* 添加淡入淡出动画 */
    z-index: 100; /* 确保Tooltip在最上层 */
}

/* 主图区域的Tooltip：鼠标悬停时在左上方显示 */
.ls-slide > li:hover::before {
    opacity: 1;
    visibility: visible;
    top: -30px;
    left: 0;
}

/* 缩略图区域的Tooltip：鼠标悬停时在左下方显示 */
.ls-thumb-item:hover::before {
    opacity: 1;
    visibility: visible;
    bottom: -30px;
    left: 0;
}

原理说明 #

lightSlider初始化后会自动生成固定的DOM结构：主图区域的容器带有.ls-slide类，缩略图项带有.ls-thumb-item类。我们利用这两个类区分两种Tooltip的定位需求，通过CSS伪元素读取data-tooltip内容，结合:hover控制显示/隐藏，完全不需要额外的JavaScript逻辑。

如果你的Tooltip内容需要动态生成（比如从后端接口获取），只需要用JavaScript给对应<li>设置data-tooltip属性即可，显示逻辑依然可以交给CSS。

内容的提问来源于stack exchange，提问作者user8815449