Подтвердить что ты не робот

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

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

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

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

Идеальное решение было бы совместимо с кросс-браузером, и это предложение не является; Я тестировал его только на 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>

Ответ 2

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