HTML <option>тег подсказка

Question

У меня есть тег со многими дочерними узлами. Я хочу, чтобы ширина этого раскрывающегося списка была минимальной. Однако бывают случаи, когда innerHTML хотя бы одного параметра очень длинный, что приводит к увеличению ширины раскрывающегося списка.

То, что я планирую сделать, это обрезать длинный текст и использовать эллипсы для обозначения того, что некоторые символы были усечены («очень неоправданно длинное предложение» становится «очень непохожим…»). Чтобы показать полный текст, я думаю об использовании всплывающей подсказки при наведении мыши на событие.

К сожалению, событие onmouseover для каждого тега не работает. Что я могу сделать, чтобы добиться этого эффекта?

Спасибо

Answer 1

Добавление атрибута title к каждой опции должно помочь.

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

Answer 2

Вы можете установить ширину <select>, и раскрывающийся список выйдет за пределы ширины выбора. Попробуйте следующее:

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