Title Attribute on Disabled Elements in Firefox

Question

I am building a very dynamic web-based application using a lot of Javascript to handle user events. I am in the process of making things a little more usable and came across a problem that I've never had before.

I am using jQuery, so factor that in to your answers. Thanks in advance.

I have a set of button elements defined as:

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

I have these buttons with a default style of:

div#option_buttons input {
     cursor: help;
}

Then, using jQuery I run something like this as a click-event on a select box:

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

So, as you can see, when a column is selected in the select box (not shown here), I want the button to be enabled and behave like a button would (with my own click-events). But when a column is not selected (including the default load), I want the button disabled. The usability developer in me wanted to give the users subtle contextual clues as to what they can do to enable the button through the native rendering of the title attribute as a lightweight tooltip. I do this already in other areas of the application (this is a crazy beast of a project) and our usability tests have shown that the users are at least capable of recognizing that when the cursor changes to "help" that they can hover over the element and get some information about what is going on.

But this is the first time I've ever tried this with a form element. Apparently when I put disabled="disabled" in the element, it completely ignores the title attribute and will never display the tool tip.

Now, I know I have a few options (at least the ones I could think of):

1. Write my own custom tool tip plug-in that is a little bit more robust.
2. Don't "disable" the element, but style it as disabled. This was the option I was leaning on the most (in terms of ease to develop) but I hate having to do this.
3. Leave the button as enabled but don't process the click event. I don't like this option as much because I like to leave things natively styled as they should logically be. A disabled button "feels" the most correct and the look of a disabled button is instantly recognizable as a disabled button.

So, with all that said, am I missing something? Is there something easy that I can do that I just haven't thought of? Google searches have failed me on this topic, so I thought I'd toss this out on StackOverflow to get some fresh eyes on this.

**Edit**

I just found another StackOverflow question on this same topic, though that person used a very different set of terms describing his problem (probably why I didn't find it).

The url to the question is: Firefox does not show tooltips on disabled input fields

Both of the answers on that question are pretty good, though I'd like to see if anyone has any other suggestions. Maybe something more jQuery specific? Thanks again.

Collocation

As of Firefox 8, the title of a disabled element is displayed upon hover. – Abidjan

Answer 1

There are several validation plugins that are very robust. You can find them in the jQuery plugins area.

Another option for you though which I happen to love and tends to be trending now adays is using the "Tipsy" plugin. You can put little '?' icons to the right of your text fields and people can mouse over them to get a "facebook-like" tool tip. This plugin is very sharp and I highly recommend it.

Good luck!

Adim

Answer 2

I had a similar problem and I just surrounded the disabled element in another element and interacted with that div, i was using tipTip to show tooltip for disabled checkbox

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

Aciculate

This is the correct answer to "How to show the title when an element is disabled?". – Norse

Answer 3

I haven't tested whether or not that solves the problem with the missing title, but you could also disable the button(s) using jquery on $(document).ready()

regards, harpax

Spermatocyte

Nah. That doesn't do it. According to one of the answers on the other SO question, this is an actual Mozilla Firefox bug that hasn't ever been fixed. I'm tempted to submit a patch to fix it, but my work exists on an intranet and it'll be like, 6 years before my users ever got the update... :( I guess now I'm just looking for the best, cleanest workaround. – Collocation

In fairness to Mozilla, the spec just about says that you shouldn't be able to interact with the disabled element, have click and hover events, etc., etc. While a tooltip might be nice, that also is making the disabled element have behaviour when maybe it shouldn't. – Farnsworth

Answer 4

If that doesn't break your design totally, you can replace your button by a "span", "p",... tag with "My 'useful' text here."

And swap it with the button only when the user makes the correct move.

Analyzer