Atributo de título em elementos desativados no Firefox

Question

Estou construindo um aplicativo baseado na Web muito dinâmico, usando muito Javascript para lidar com eventos do usuário.Estou no processo de tornar as coisas um pouco mais utilizáveis ​​e me deparei com um problema que nunca tive antes.

Estou usando jQuery, então leve isso em consideração em suas respostas.Desde já, obrigado.

Eu tenho um conjunto de elementos de botão definidos como:

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

Eu tenho esses botões com um estilo padrão de:

div#option_buttons input {
     cursor: help;
}

Então, usando jQuery, executo algo assim como um evento de clique em uma caixa de seleção:

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

Então, como você pode ver, quando uma coluna é selecionada na caixa de seleção (não mostrada aqui), quero que o botão seja habilitado e se comporte como um botão faria (com meus próprios eventos de clique).Mas quando uma coluna não está selecionada (incluindo o carregamento padrão), quero que o botão seja desativado.O desenvolvedor de usabilidade que há em mim queria dar aos usuários dicas contextuais sutis sobre o que eles podem fazer para ativar o botão por meio da renderização nativa do atributo title como uma dica de ferramenta leve.Eu já faço isso em outras áreas do aplicativo (este é um projeto maluco) e nossos testes de usabilidade mostraram que os usuários são pelo menos capazes de reconhecer que quando o cursor muda para "ajuda" eles podem passar o mouse sobre o elemento e obter algumas informações sobre o que está acontecendo.

Mas esta é a primeira vez que tento fazer isso com um elemento de formulário.Aparentemente, quando coloco disabled="disabled" no elemento, ele ignora completamente o atributo title e nunca exibirá a dica de ferramenta.

Agora, sei que tenho algumas opções (pelo menos as que consegui pensar):

1. Escreva meu próprio plug-in de dica de ferramenta personalizado que é um pouco mais robusto.
2. Não "desative" o elemento, mas defina-o como desativado.Essa foi a opção em que mais me apoiei (em termos de facilidade de desenvolvimento), mas odeio ter que fazer isso.
3. Deixe o botão habilitado, mas não processe o evento de clique.Não gosto tanto dessa opção porque gosto de deixar as coisas com estilo nativo como deveriam ser logicamente.Um botão desativado "parece" mais correto e a aparência de um botão desativado é instantaneamente reconhecível como um botão desativado.

Então, com tudo isso dito, estou faltando alguma coisa?Existe algo fácil que eu possa fazer e que ainda não pensei?As pesquisas do Google falharam neste tópico, então pensei em jogar isso no StackOverflow para ter uma nova visão sobre isso.

**Editar**

Acabei de encontrar outra pergunta do StackOverflow sobre o mesmo tópico, embora essa pessoa tenha usado um conjunto de termos muito diferente para descrever seu problema (provavelmente por que não o encontrei).

O URL da pergunta é: O Firefox não mostra dicas de ferramentas em campos de entrada desabilitados

Ambas as respostas para essa pergunta são muito boas, mas eu gostaria de ver se alguém tem alguma outra sugestão.Talvez algo mais específico do jQuery?Obrigado novamente.

Answer 1

Existem vários plugins de validação que são muito robustos.Você pode encontrá-los na área de plugins jQuery.

Outra opção para você que adoro e que tende a ser tendência hoje em dia é usar o plugin "Tipsy".Você pode colocar pouco '?' Os ícones à direita dos seus campos de texto e as pessoas podem se engajar sobre eles para obter uma dica de ferramenta "semelhante ao Facebook".Este plugin é muito afiado e eu o recomendo fortemente.

Boa sorte!

Answer 2

Eu tive um problema semelhante e apenas coloquei o elemento desativado em outro elemento e interagi com aquele div, eu estava usando o tipTip para mostrar a dica da caixa de seleção desativada

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

Answer 3

Não testei se isso resolve ou não o problema do título ausente, mas você também pode desativar o (s) botão (ões) usando jquery em $(document).ready()

Atenciosamente, Harpax

Answer 4

Se isso não quebrar totalmente o seu design, você pode substituir o botão por um "span", "p",...tag com "Meu texto 'útil' aqui."

E troque pelo botão somente quando o usuário fizer o movimento correto.