Инициировать событие onmouseover, когда элемент отключен

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

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

В дополнение к тому, что сказал @Diodeus, вы можете использовать jQuery для автоматического создания контейнера div для вас. и оберните его вокруг любых отключенных элементов.

1. Используйте селектор :disabled, чтобы найти все отключенные элементы.
2. Затем вызовите метод .wrap() с обратным вызовом функции.
3. Вы можете использовать this для ссылки на текущий элемент в наборе.
4. Затем используйте метод .attr(), чтобы получить значение onmouseover из родительского элемента и применить то же значение к новому разд.

$(':disabled').wrap(function() {
    return '<div onmouseover="' + $(this).attr('onmouseover') + '" />';
});

Демо в jsFiddle

Я знаю, что это старый пост, но, надеюсь, этот ответ прояснит, как можно реализовать ответ @Diodeus!

Отключенные элементы не запускают события, например. пользователи не могут навести или щелкнуть их, чтобы вызвать всплывающее окно (или всплывающую подсказку). Однако в качестве обходного пути вы можете обернуть <DIV> или <span> вокруг отключенного элемента и вместо этого прослушивать событие, вызванное этим элементом.

ПРИМЕЧАНИЕ! Использование onmouseover и onmouseout в оболочке <DIV> не будет работать должным образом в Chrome (v69). Но будет работать в IE. Вот почему я рекомендую пользователям вместо этого использовать onmouseenter и onmouseleave, которые отлично работают как в IE, так и в Chrome.

   <select disabled="disabled" onmouseover="alert('hi');">
    <option>Disabled</option>
  </select>

  <div onmouseenter="alert('hi');">
    <select disabled="disabled" onmouseover="alert('hi');">
      <option>Disabled with wrapper</option>
    </select>
  </div>

Я собрал скрипт JS с несколькими примерами здесь: http://jsfiddle.net/Dr4co/tg6134ju/< /а>

Я знаю, что это старый пост, но в chrome вы можете установить все события-указатели свойства css, и это должно разрешать события. В других браузерах не проверял.

button[disabled] {
  pointer-events: all;
}

Редактировать:

На самом деле я думаю, что достаточно установить для свойства значение auto. Как прокомментировал @KyleMit, поддержка довольно хорошая.

Я просто использовал это в проекте, где мне нужно было отключить кнопку до тех пор, пока не будут соблюдены некоторые правила проверки, но мне также нужно было запустить проверку при наведении на кнопку. Таким образом, добавление событий-указателей помогло. Я думаю, что это самый простой способ решить проблему, указанную в ОП.

Почему вы не можете добавить заголовок к целевому элементу? заголовок выглядит так же, как всплывающая подсказка. И заголовок работает с отключенными элементами.

когда вы устанавливаете значение вашего выбора, также установите заголовок:

element.value=value;
element.title = element.options[element.selectedIndex].text;

есть два решения для этого

<Tooltip title="Tooltip" placement="bottom">
          <div>
            <IconButton disabled>
              <Done />
            </IconButton>
          </div>
        </Tooltip>

или этот, если вы не хотите пропустить вид

<Tooltip title="Tooltip" placement="bottom">
  <IconButton component="div" disabled>
    <Done />
  </IconButton>
</Tooltip>

ссылка