Javascript img和li的工具提示

我正在为我的照片使用lightslider，我想在将鼠标悬停在照片上时显示工具提示。img的元素位于其上方的左侧，其下方列表的元素位于左下角。这可以只使用css或其他东西来完成吗

$（'#lightSlider'）。lightSlider({
画廊：没错，
项目：1，
循环：对，
幻灯片摘要：0，
拇指项目：9
});
.demo{
宽度：420px；
}
保险商实验室{
列表样式：无外无；
左侧填充：0；
页边距底部：0；
}
李{
显示：块；
浮动：左；
右边距：6px；
光标：指针；
}
img{
显示：块；
高度：自动；
最大宽度：100%；
}



























自2017年1月16日起对于您正在使用的库“lightslider”，请使用
data toggle=“tooltip”
。所以你必须使用其他的东西

您仍然可以通过向每个图像添加title=“Your tooltip”，在主图像（以大图而不是缩略图显示的图像）上获得基本的工具提示

<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-2.jpg">
  <img title="hi" src="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg" alt="">
</li>



是的，它可以通过css完成：


$（'#lightSlider'）。lightSlider({
画廊：没错，
项目：1，
循环：对，
幻灯片摘要：0，
拇指项目：9
});
.demo{
宽度：420px；
}
保险商实验室{
列表样式：无外无；
左侧填充：0；
页边距底部：0；
}
李{
显示：块；
浮动：左；
右边距：6px；
光标：指针；
}
img{
显示：块；
高度：自动；
最大宽度：100%；
}
.工具提示{
位置：相对位置；
显示：内联块；
边框底部：1px点黑色；
}
.tooltip.tooltiptext{
可见性：隐藏；
宽度：120px；
背景色：黑色；
颜色：#fff；
文本对齐：居中；
边界半径：6px；
填充：5px0；
位置：绝对位置；
z指数：1；
}
.tooltip:悬停.tooltiptext{
能见度：可见；
}

提示文本


























可能重复的工具提示插件有一百万个。我最喜欢的是，您可以始终将属性“title”添加到图像中，浏览器会将其显示为工具提示。虽然这对缩略图不起作用，但只对滑块上的图像起作用。