如何在列表上映射时显示不同的工具提示文本？

<ul>
  <li data-tooltip="提示文本1">列表项1</li>
  <li data-tooltip="提示文本2">列表项2</li>
  <li data-tooltip="提示文本3">列表项3</li>
</ul>

li {
  position: relative;
  cursor: pointer;
}

li::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  padding: 5px;
  background-color: #f1f1f1;
  border: 1px solid #ccc;
}

li:hover::after {
  display: block;
}

const listItems = document.querySelectorAll('li');
listItems.forEach(item => {
  item.addEventListener('click', () => {
    const tooltip = item.getAttribute('data-tooltip');
    alert(tooltip);
  });
});