使用data-list元素时，有一种方法可以显示每个选项的工具提示

问题描述

所以我目前有一个完整的游戏数据列表，有什么方法可以实现，因此当您将鼠标悬停在每种能力上时，它会给出提示信息，说明该能力是什么？它不必只是工具提示，而只是功能类似，如果您对如何做有一个聪明的主意，则iframe可以使用！

这是网站：https://mindweavedmstation.hunterscott1.repl.co/ 如果单击编辑按钮（在能力下方），它将显示三个+按钮，在能力下按下一个，这将创建一个新框，如果您单击此框，则会显示能力的数据列表。当您将鼠标悬停在一个能力上时，我会在右边弹出一个说明该能力的框。

这是代码的链接：https://repl.it/@HunterScott1/MindWeaveDMStation#index.html 数据列表可以在script.js第108行找到

如果您有任何澄清的问题，请随时提出！谢谢！

解决方法

问题是如何向数据列表元素中的HTML选项标签添加一些悬停动作。

直接的答案是你不能。您甚至无法设置各个选项的样式（尽管某些浏览器允许您对此进行标准化），更不用说在悬停时进行一些操作了。

有一些解决方法：

自动替换所有此类元素

您可以引入一些Javascript来扫描您的文档，例如droplist或select元素，将其设置为不显示，并在其旁边添加“标准”元素，例如可模拟它们的div。您可以在How to style the option of an html "select" element?

上查看有关此问题的进一步讨论

尽管这可能很有用，例如，如果您不能完全控制所有源代码，那么它会增加一层复杂性，如果您可以自己实现HTML，则不需要。

如果您控制HTML，则实现自己的选项下拉菜单并不十分复杂，并且具有以下附加优点：您可以按照希望它们与网站其余部分匹配的方式来对事物进行样式设置，而不必依赖（不一致的）样式浏览器中的此类列表。

这里有一些代码可以帮助您入门。根据需要将CSS添加到元素：

<head>
<style>
.select {
  background-color: white;
  width: 300px;
  height: auto;
  font-size: 16px;
  border-style: solid;
  padding: 10px;
}
.options {
  display: none;
}
.option {
  width: 100%;
  height: 40px;
  background-color: white;
}
.hoverinfo {
  display: none;
  float: right;
  background-color: #eeeeee;;
}
ul {
  list-style: none;
}
</style>
</head>
<body onclick="document.getElementById('select').firstElementChild.style.display='none';">
  <div id="select" class="select" onclick="event.preventDefault();event.stopPropagation();this. firstElementChild.style.display='block';">
    Select from this list
    <ul class="options">
      <li class="option" onclick="userhaschosen(this);" onmouseenter="event.preventDefault();event.stopPropagation();this.firstElementChild.style.display='block';" onmouseout="event.preventDefault();event.stopPropagation();this.firstElementChild.style.display='none';">
        Option 1
        <div class="hoverinfo">info about this option</div>
      </li>
      <li class="option"       <li class="option" onclick="userhaschosen(this);" onmouseenter="event.preventDefault();event.stopPropagation();this.firstElementChild.style.display='block';" onmouseout="event.preventDefault();event.stopPropagation();this.firstElementChild.style.display='none';">
        Option 2
        <div class="hoverinfo">info about this option</div>
      </li>
    </ul>
  </div>

<script>
function userhaschosen(el) {
  event.preventDefault();
  event.stopPropagation();
  el.parentElement.style.display='none';
  alert("user has chosen option "+el.firstChild.textContent);//instead of this alert,do whatever it is you want to do when the user has clicked an option
}
</script>
</div>

html javascript tooltip