当鼠标悬停在列表项上时如何显示工具提示？

当鼠标悬停在列表项上时，可以通过使用HTML和CSS来显示工具提示。以下是一种常见的实现方法：

1. 首先，在HTML中为列表项添加一个属性，例如title，并将其值设置为要显示的工具提示文本。例如：

<ul>
  <li title="这是工具提示1">列表项1</li>
  <li title="这是工具提示2">列表项2</li>
  <li title="这是工具提示3">列表项3</li>
</ul>

1. 接下来，使用CSS样式来定义工具提示的外观。可以使用::after伪元素来创建一个小的提示框，并设置其内容为attr(title)，即列表项的title属性的值。例如：

li:hover::after {
  content: attr(title);
  background-color: #000;
  color: #fff;
  padding: 5px;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
}

在上述CSS代码中，使用li:hover选择器来指定当鼠标悬停在列表项上时应用样式。::after伪元素用于创建提示框，并设置其样式，例如背景颜色、文字颜色、内边距等。position: absolute将提示框定位在列表项下方，top: 100%将其相对于列表项的底部对齐，left: 0将其相对于列表项的左侧对齐，z-index: 1确保提示框显示在其他内容之上。

1. 最后，可以根据需要进一步自定义工具提示的样式，例如调整字体大小、边框样式等。

这种方法可以在鼠标悬停在列表项上时显示一个简单的工具提示，提供额外的信息或说明。如果需要更复杂的工具提示，可以使用JavaScript或第三方库来实现。