HTML <option> tag tooltip

I have a <select> tag with many <option> child nodes. I want to keep the width of this drop-down list to a minimum size. However, there are times when the innerHTML of at least one option is very long, forcing the drop-down list box to expand its width.

What I'm planning to do is to truncate the long text and use ellipses to denote that some characters have been truncated ("very loooooong sentence" becomes "very loooooo..."). To show the full text, I'm thinki开发者_如何学Gong of using tooltip message on mouse over event.

Unfortunately, the onmouseover event for each tag doesn't seem to work. What can I do to achieve this effect?

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

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

You can set the width of the <select> and the dropdown will extend beyond the width of the select. 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>