我正在尝试为可滚动列表中的元素创建工具提示。我希望工具提示:
- 在滚动区域外可见(未被剪裁)
- 立即出现在他们作为工具提示的元素之后
- 从包含元素的内容中删除
标记如下所示:
<ul>
<li>
<div class='option'>Option</div>
<div class='tooltip'><h4>Tooltip</h4> Tooltip tooltip tooltip tooltip tooltip tooltip tooltip tooltip tooltip tooltip tooltip tooltip tooltip tooltip tooltip tooltip tooltip tooltip.</div>
</li>
<!-- plus fourteen more identical li's -->
</ul>
像这样的CSS:
ul{
list-style-type:none;
border:thin solid gray;
width:80px;
height:200px;
overflow:auto;
}
.tooltip {
display:none;
border:thin solid black;
box-shadow: 2px 2px 2px #aaa;
background-color:white;
z-index:10000;
padding:3px;
width:150px;
position:absolute;
}
.option:hover + .tooltip{
display:block;
}
这是我发现的演示:http://plnkr.co/edit/vhKquqeswyDwvDQNP12G?p=preview
如果我在工具提示上使用相对定位，它会出现在正确的位置，但会被滚动区域剪裁(并且不会从 li 的内容中删除)。
如果我使用绝对定位，工具提示会显示在滚动区域之外(需要)，但一旦 ul 被滚动离开顶部，它就会出现在错误的位置。
如果我使用绝对定位并应用相对定位的包装器将工具提示固定到列表项的位置，即使滚动后工具提示仍处于正确位置并从列表项的内容中移除，但被剪裁按列表区域。
有没有什么方法可以使用 css 实现我想要的所有三件事？
最佳答案
我知道这并不完全是您想要的，但跳出框框思考以下内容可以为用户带来有趣的 UX 体验...
请注意，这可能不适用于移动设备，因为它依赖于悬停，而不是触摸。您将需要测试和修复事件/在需要的地方添加 js 垫片。
演示
http://plnkr.co/edit/ZYkyjbS9vPzQ4EYXKHHG?p=preview
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h3>Relative positioning</h3>
<div class='wrapper'>
<ul>
<li>
<div class='option'>Option</div>
<div class='tooltip'><h4>Tooltip 1</h4> Tooltip tooltip tooltip tooltip tooltip tooltip tooltip tooltip tooltip tooltip tooltip tooltip tooltip tooltip tooltip tooltip tooltip tooltip.</div>
</li>
<li>
<div class='option'>Option</div>
<div class='tooltip'><h4>Tooltip 2</h4> Tooltip tooltip tooltip tooltip tooltip tooltip tooltip tooltip tooltip tooltip tooltip tooltip tooltip tooltip tooltip tooltip tooltip tooltip.</div>
</li>
... etc
</ul>
</div>
</body>
</html>
CSS
body{
font-family:arial;
font-size:80%;
}
ul{
list-style-type:none;
border:thin solid gray;
width:5em;
height:10em;
overflow:auto;
margin:0;
padding:0;
}
.tooltip {
display:none;
border:thin solid black;
box-shadow: 2px 2px 2px #aaa;
background-color:white;
padding:3px;
width:150px;
}
.option:hover {
background-color: #CCC;
}
.option:hover + .tooltip{
display:block;
position:absolute;
top:0;
left:6em;
}
.wrapper{position:relative;}
进一步的工作:如果您更改样式，使工具提示文本位于左侧，并且具有与选项的高亮颜色相同颜色的粗边框，它看起来会非常漂亮!
http://plnkr.co/edit/7JTjgxDTjSNonIZCOPZE?p=preview
需要进一步的工作才能使其易于访问(longdesc 或 aria-describedby anyone?)
关于html - 具有适当滚动行为的绝对定位的布局行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21358961/