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

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

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

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

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

13
compatibility cross-browser firefox html

6 ответов

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

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

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

9

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

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

может исправить проблему.

6

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

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

вещь 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-индекс узла и/или отключенного элемента динамично.

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

1

я столкнулся с подобной проблемой, и я мог бы исправить это, используя juery и Малый класс 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);
                    }
                });
            }
        });

надеюсь, это поможет, Притхэм.

1

вы можете использовать javascript. Используйте событие mouseover.

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

-1