Как вы отображаете подсказку на отключенной кнопке HTML?

Question

У меня есть кнопка HTML. Я попытался отобразить всплывающую подсказку на основе атрибута «title» кнопки, и он не отображается. Главным образом потому, что он отключен.

Затем я попытался обернуть кнопку в диапазон и установить атрибут «title» диапазона.

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

Итак: как отобразить всплывающую подсказку для отключенной кнопки?

Answer 1

Я получил это, применив CSS pointer-events: auto; к кнопке, хотя это не поддерживается в IE <11. </p>

Answer 2

Идеальное решение было бы совместимо с несколькими браузерами, а это предложение не так; Я тестировал его только на Ubuntu 9.10, хотя с Chrome, Firefox, Epiphany и Opera, и, похоже, он надежно работает в тех, что подразумевает надежность в их аналогах Windows. Очевидно, IE - это совершенно другой котелок с рыбой.

Как говорится:

Эта идея основана на следующем (x) html:

<form>
    <fieldset>
        <button disabled title="this is disabled">disabled button</button>
    </fieldset>    
</form>

И использует следующий CSS для достижения чего-то близкого к вашей цели:

button  {
    position: relative;
}

button:hover:after {
    position: absolute;
    top: 0;
    left: 75%;
    width: 100%;
    content: attr(title);
    background-color: #ffa;
    color: #000;
    line-height: 1.4em;
    border: 1px solid #000;
}

button {
  position: relative;
  box-sizing: border-box;
}
button:hover:after {
  position: absolute;
  top: 0;
  left: 75%;
  width: 100%;
  content: attr(title);
  background-color: #ffa;
  color: #000;
  line-height: 1.4em;
  border: 1px solid #000;
  box-shadow: 2px 2px 10px #999;
}

<form>

  <fieldset>

    <button disabled title="this is disabled">disabled button</button>

  </fieldset>

</form>

Это не идеал, но это была лучшая идея не-JavaScript, которую я мог придумать.

Answer 3

Это ошибка в Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=274626