Firefox не показывает всплывающие подсказки на отключенных полях ввода

Question

Firefox не отображает всплывающие подсказки на отключенных полях.

Следующие подсказки отображаются в IE / Chrome / Safari, за исключением Firefox:

<input type="text" disabled="disabled" title="tooltip text."/>

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

Answer 1

Кажется, что это (очень старая и очень заброшенная) ошибка. См. Mozilla Bugs # 274626 # 436770

Полагаю, это также можно объяснить как предполагаемое поведение.

Один ужасный обходной путь, который приходит на ум, - это наложить кнопку на невидимый div с атрибутом title, используя z-index; другой, чтобы как-то повторно активировать кнопку «onmouseover», но ловко перехватить и удалить любое событие click на этой кнопке.

Answer 2

Полагаю, вы используете некоторые фреймворки, такие как bootstrap . Если это так, он добавляет pointer-events: none к элементу «disabled», поэтому все события мыши игнорируются.

.btn[disabled] {
  pointer-events: auto !important;
}

может решить проблему.

Answer 3

Вы можете обойти это с помощью кода jQuery, например:

    if ($.browser.mozilla) {
        $(function() {
            $('input[disabled][title]')
                .removeAttr('disabled')
                .addClass('disabled')
                .click(function() {return false})
            })
    }

Answer 4

Я столкнулся с подобной проблемой, и я мог бы ее исправить, используя классы juery и small css, вам потребуется создать два новых элемента span и класс css, которые выглядят следующим образом

Просто добавьте их в общий файл js и css, который используется во всем приложении или на веб-сайте

.DisabledButtonToolTipSpan
{
position    :absolute;
z-index     :1010101010;
display     :block;
width       :100%;
height      :100%;
top         :0;         
}

Для отображения всплывающей подсказки для отключенной кнопки в браузере Firefox.

$(window).load(function() {
    if ($.browser.mozilla) {
                $("input").each(function() {
                    if ((this.type == "button" || this.type == "submit") && this.disabled) {

                        var wrapperSpan = $("<span>");
                        wrapperSpan.css({ position: "relative" });
                        $(this).wrap(wrapperSpan);

                        var span = $("<span>");
                        span.attr({
                            "title": this.title,
                            "class": "DisabledButtonToolTipSpan"
                        });
                        $(this).parent().append(span);
                    }
                });
            }
        });

Надеюсь, это поможет, Preetham.

Answer 5

Z-индексирование можно сделать так:

  .btnTip

  {

     position: absolute;

     left: 0%;

     right: 0%;

     z-index: 100;

     width: 50px;

     /*background-color: red;*/

     height: 17px;

  }

(...)

<div style="background-color: gray; width: 400px;">

  Set width of the tip-span to the same as the button width.

  <div style="text-align: center;">

     <span style="position:relative;">

        <span class="btnTip" title="MyToolTip">&nbsp;</span>

        <input type="button" name="" disabled="disabled" value="Save" style="width: 50px;height:17px;" />                                         

     </span>

  </div>             

Слева и справа помогает расположить хост поверх отключенного элемента. Z-индекс определяет, в какой слой вы помещаете элемент.

Чем больше число z-слоя, тем больше «сверху» будет.

Z-индекс хоста и / или отключенного элемента должен устанавливаться динамически.

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

Answer 6

Вы можете использовать JavaScript. Используйте событие наведения мыши.

(У многих библиотек, таких как JQuery и Mootools, есть плагины всплывающей подсказки. Используя их, вы даже можете стилизовать подсказки).