Attribut de titre sur les éléments désactivés dans Firefox

Je crée une application Web très dynamique utilisant beaucoup de Javascript pour gérer les événements utilisateur. Je suis en train de rendre les choses un peu plus utilisables et j'ai rencontré un problème que je n'ai jamais eu auparavant.

J'utilise jQuery, alors ajoutez-le à vos réponses. Merci d'avance.

J'ai un ensemble d'éléments de bouton définis comme suit:

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

J'ai ces boutons avec un style par défaut de:

• Autorisation refusée à l'aide de Javascript / jQuery sur un fichier local
• Comment redimensionner div sur la taille du navigateur
• Performance Javascript? – Mettre des événements dans une balise html ou les lier?
• Modifier le style de police du texte sélectionné dans javascript
• N'appliquez que jQuery «reflux» de cascade après avoir chargé les images

 div#option_buttons input { cursor: help; } 

Ensuite, en utilisant jQuery, je cours quelque chose comme un événement de clic sur une boîte de sélection:

 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'); } }); 

Ainsi, comme vous pouvez le voir, lorsqu'une colonne est sélectionnée dans la boîte de sélection (ne s'affiche pas ici), je veux que le bouton soit activé et que le comportement soit comme si un bouton (avec mes propres événements de clic). Mais lorsqu'une colonne n'est pas sélectionnée (y compris la charge par défaut), je souhaite que le bouton soit désactivé. Le développeur d'utilisabilité en moi voulait donner aux utilisateurs des indices contextuels subtils sur ce qu'ils peuvent faire pour activer le bouton à travers le rendu natif de l'attribut title comme une info-bulle légère. Je le fais déjà dans d'autres domaines de l'application (c'est une bête folle d'un projet) et nos tests d'utilisabilité ont montré que les utilisateurs sont au moins capables de reconnaître que lorsque le curseur change pour «aider» à pouvoir survoler Élément et obtenir des informations sur ce qui se passe.

Mais c'est la première fois que je l'ai déjà essayé avec un élément de formulaire. Apparemment, lorsque j'ai mis désactivé = "désactivé" dans l'élément, il ignore complètement l'attribut de titre et n'indique jamais la pointe de l'outil.

Maintenant, je sais que j'ai quelques options (au moins celles que je pourrais penser):

1. Ecrivez mon propre plug-in de pointe d'outil qui est un peu plus robuste.
2. Ne pas "désactiver" l'élément, mais le classer comme désactivé. C'était l'option sur laquelle je me penchais le plus (en termes de facilité à développer) mais je déteste avoir à faire cela.
3. Laissez le bouton comme activé mais ne traitez pas l'événement de clic. Je n'aime pas autant cette option car j'aime laisser les choses de manière natif comme elles devraient être logiquement. Un bouton désactivé "sent" le plus correct et l'apparence d'un bouton désactivé est immédiatement reconnaissable comme un bouton désactivé.

Alors, avec tout ce qui dit, est-ce que je manque quelque chose? Est-ce qu'il y a quelque chose de facile que je puisse faire que je n'ai jamais pensé? Les recherches de Google m'ont échoué sur ce sujet, alors je pensais que je lancerais cela sur StackOverflow pour obtenir des regards nouveaux sur ce sujet.

**Modifier**

Je viens de trouver une autre question de StackOverflow sur ce même sujet, bien que cette personne ait utilisé un ensemble de termes très différent décrivant son problème (probablement pourquoi je ne l'ai pas trouvé).

L'URL de la question est la suivante: Firefox ne montre pas d'info-bulle sur les champs de saisie désactivés

Les deux réponses sur cette question sont très bonnes, mais j'aimerais voir si quelqu'un a d'autres suggestions. Peut-être que quelque chose de plus spécifique à jQuery? Merci encore.

• De belles URL de recherche
• Comment afficher / masquer les lignes de table HTML cachées à l'aide de JavaScript (pas jQuery)
• Limiter le conteneur / parent pour Sortable
• Ordre de chargement d'images en html et css
• JQuery Validation ne fonctionne pas dans le serveur! Fonctionne localement. Pourquoi?

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