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 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?
Adding a title attribute to each option should do the trick.