在列表中使用tootips [HTML、CSS]

<ul>
  <li id="item1">列表项1</li>
  <li id="item2">列表项2</li>
  <li id="item3">列表项3</li>
</ul>

#item1:hover::after,
#item2:hover::after,
#item3:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  background-color: #000;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
  top: 20px;
  left: 0;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s;
}

#item1:hover::after {
  left: 20px;
}

#item2:hover::after {
  left: 40px;
}

#item3:hover::after {
  left: 60px;
}

<ul>
  <li id="item1" data-tooltip="这是列表项1的提示信息">列表项1</li>
  <li id="item2" data-tooltip="这是列表项2的提示信息">列表项2</li>
  <li id="item3" data-tooltip="这是列表项3的提示信息">列表项3</li>
</ul>