Атрибут Title для отключенных элементов в Firefox

Question

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

Я использую jQuery, так что учтите это в ваших ответах.Заранее благодарю.

У меня есть набор элементов button, определенных как:

<input type="button" title="My 'useful' text here." disabled="disabled" />

У меня есть эти кнопки со стилем по умолчанию:

div#option_buttons input {
     cursor: help;
}

Затем, используя jQuery, я запускаю что-то вроде этого как событие щелчка в поле выбора:

window.current_column = '';
$('select.report_option_columns').live('click', function() {
    var column = $(this).val();
    if ( column == window.current_column ) {
        // clear our our previous selections
        window.current_column = '';
        // make this option no longer selected
        $(this).val('');

        $('div#option_buttons input').attr('disabled','disabled');
        $('div#option_buttons input').attr(
            'title',
            'You must select a column from this list.'
        );
        $('div#option_buttons input').css('cursor', 'help');
    } else {
        window.current_column = column;
        $('div#option_buttons input').attr('disabled','');
        $('div#option_buttons input').attr(
            'title',
            'Add this option for the column "' + column + '"'
        );
        $('div#option_buttons input').css('cursor', 'default');
    }
});

Итак, как вы можете видеть, когда столбец выбран в поле выбора (здесь не показано), я хочу, чтобы кнопка была включена и вела себя как кнопка (с моими собственными событиями нажатия).Но когда столбец не выбран (включая загрузку по умолчанию), я хочу, чтобы кнопка была отключена.Разработчик юзабилити во мне хотел дать пользователям тонкие контекстуальные подсказки относительно того, что они могут сделать, чтобы включить кнопку с помощью встроенного рендеринга атрибута title в виде облегченной всплывающей подсказки.Я уже делаю это в других областях приложения (это безумный проект), и наши тесты юзабилити показали, что пользователи, по крайней мере, способны распознать, что когда курсор меняется на "справка", они могут навести курсор на элемент и получить некоторую информацию о том, что происходит.

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

Теперь я знаю, что у меня есть несколько вариантов (по крайней мере, те, которые пришли мне в голову).:

1. Напишу свой собственный пользовательский плагин tool tip, который будет немного более надежным.
2. Не "отключайте" элемент, но оформите его как отключенный.Это был вариант, на который я опирался больше всего (с точки зрения простоты разработки), но я ненавижу делать это.
3. Оставьте кнопку включенной, но не обрабатывайте событие нажатия.Мне не так нравится этот вариант, потому что мне нравится оставлять вещи в первоначальном стиле такими, какими они должны быть по логике вещей.Отключенная кнопка "ощущается" наиболее корректно, и внешний вид отключенной кнопки мгновенно распознается как отключенная кнопка.

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

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

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

URL-адрес к вопросу таков: Firefox не показывает всплывающие подсказки для отключенных полей ввода

Оба ответа на этот вопрос довольно хороши, хотя я хотел бы посмотреть, есть ли у кого-нибудь другие предложения.Может быть, что-то более специфичное для jQuery?Еще раз спасибо.

Answer 1

Существует несколько очень надежных плагинов для проверки.Вы можете найти их в разделе плагины jQuery.

Другой вариант для вас, который мне очень нравится и который, как правило, сейчас в тренде, - это использование плагина "Tipsy".Вы можете поместить маленькие значки "?" справа от ваших текстовых полей, и люди смогут навести на них курсор мыши, чтобы получить всплывающую подсказку "facebook-like".Этот плагин очень острый, и я настоятельно рекомендую его.

Удачи вам!

Answer 2

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

<div style="cursor: pointer;" class="disabled" title="Do something to make it work" >   
        <input disabled="disabled" type="checkbox">
</div>

Answer 3

Я не проверял, решает ли это проблему с отсутствующим заголовком, но вы также можете отключить кнопки с помощью jquery на $(document).ready()

с уважением, harpax

Answer 4

Если это не нарушает ваш дизайн полностью, вы можете заменить кнопку на «span», «p»,...с тегом «Здесь мой «полезный» текст».

И меняйте местами кнопку только тогда, когда пользователь сделает правильный ход.