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

So I currently Have a data list full of different abilities for a game is there any way to make it so when you hover over each ability it will give a tooltip saying what the ability is? It doesn't have to be a tooltip just something that functions similarly, a iframe would work if you have a smart idea on how to do it!

here is the website: https://mindweavedmstation.hunterscott1.repl.co/ if you click the edit button(right under ability), then it will show up with three + buttons press the one under abilities, this will create a new box if you click in this box it will show the data list of abilities. I would like for as you hover over a ability a box will pop up to the right explaining the ability.

here is a link to the code: https://repl.it/@HunterScott1/MindWeaveDMStation#index.html The data list can be found at script.js line 108

If you have any clarifying questions feel free to ask! Thank you!

Solution

The question is how to add some onhover action to an HTML option tag in a datalist element.

The immediate answer is that you can't. You can't even style the individual options (though some browsers let you a little this is not standardised), let alone instigate some action onhover.

There are some workarounds:

Automatically replace all such elements

You can introduce some Javascript which scans through your document, finds e.g. droplist or select elements, sets them not to display, and adds alongside them 'standard' elements like divs which emulate them. You can see further discussion on this for example at How to style the option of an html "select" element?

Although this might be useful, for example if you do not have complete control of all the source code, it adds a layer of complexity which isn't necessary if you can implement the HTML yourself.

If you control the HTML, implementing your own options drop down is not very complex and has the added advantage that you can style things the way you want them to match the rest of your site, not rely on the (inconsistent) styling of such lists across browsers.

Here's some code to get you started. Add CSS to the elements as you like:

<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>