HTML <option> tag tooltip

Question

Hi,

I have a tag with many 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.."). In order to show the full text, I'm thinking 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?

Thanks

Answer 1

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

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

Answer 2

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>