HTML <option> tag tooltip

Question

I have a tag with many child nodes. I want the width of this dropdown to be minimal. However, there are times when the innerHTML of at least one parameter is very long, causing the drop-down list to expand its width.

What I plan to do is truncate long text and use ellipses to indicate that some characters have been truncated (the "very loooooong sentence" becomes "very loooooo .."). To show the full text, I am thinking of using a tooltip for the mouse over the event.

Unfortunately, the onmouseover event for each tag does not work. What can I do to achieve this effect?

thank

Answer 1

Adding a title attribute for each option should do the trick.

<option value="1" title="Long description">Short desc...</option>

Answer 2

You can set the width <select>and the drop-down menu will go beyond the width of the selection. Try the following:

<select style="width: 30px">
  <option>1</option>
  <option>really long</option>
  <option>even more longer</option>
  <option>This should be long enough to stretch to the end of the page, but the select is still not very long</option>
</select>