使用 data-list 元素时，有没有办法显示每个选项的工具提示

Question

所以我目前有一个包含游戏不同能力的数据列表，有什么方法可以让它在你将鼠标悬停在每个能力上时它会给出一个工具提示，说明这个能力是什么？它不一定是工具提示，只是功能相似的东西，如果您对如何操作有明智的想法，iframe 就可以工作！

这是网站：https://mindweavedmstation.hunterscott1.repl.co/ 如果你点击编辑按钮（在能力下面），然后它会显示三个+按钮按下能力下面的那个，这将创建一个新框如果你点击这个框它会显示能力的数据列表。我希望当您将鼠标悬停在某个能力上时，右侧会弹出一个框来解释该能力。

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

行找到

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

Answer 1

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

直接的答案是你不能。您甚至无法设置单个选项的样式（尽管某些浏览器让您有点不标准化），更不用说在悬停时发起一些操作了。

有一些解决方法：

自动替换所有此类元素

您可以引入一些 Javascript 来扫描您的文档，找到例如droplist 或 select 元素，将它们设置为不显示，并在它们旁边添加 'standard' 元素，例如模拟它们的 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>

使用 data-list 元素时，有没有办法显示每个选项的工具提示

When using the data-list element is there a way to show tool-tips for each option

html

javascript

css

tooltip