Question

我正在尝试为可滚动列表中的项创建工具提示。我想要工具提示：

在滚动区域外看（不被剪辑）
在项目之后立即显示
将从包含项目的内容中删除

desired result

标记看起来像这样：

<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的内容中删除）。

enter image description here

如果我使用绝对定位，工具提示会显示在滚动区域外（所需），但是当ul从顶部滚动后，它会显示在错误的位置。

misplaced tool tip

如果我使用绝对定位并应用相对定位的包装器将工具提示固定到列表项的位置，则工具提示即使在滚动后也处于正确位置并从列表项的内容中删除，但是被剪切列表区域。

with relative wrapper

有没有用css实现我想要的所有三件事？

Answer 1

我知道这不是你想要的，但是在盒子外思考以下内容可以给用户带来有趣的用户体验......

请注意，这可能不适用于移动设备，因为它依赖于悬停，而不是触摸。您需要测试并修复事件/在需要的地方添加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或咏叹调？）

具有适当滚动行为的绝对定位的布局行为

1 个答案:

演示

HTML

CSS