PDA

View Full Version : Adding a tooltip dynamically to a disabled button in IE



Qtx
11 Jan 2011, 3:06 AM
ExtJS 3.3.1
Internet Explorer 8

In my application, I am disabling some buttons if the user is not allowed to perform the actions they fire.

Whether to disable or not can be defined only after loading of the data into form. After loading, I check this and disable the button and add the tooltip why it is disabled.

It works well except for IE. In the IE, a tooltip, dynamically added to a disabled button, is not shown by mouse over. In other browsers, it works!

Interesting, that if I add the tooltip statically (while form definition)

qtip: 'Sometext',
disabled: true

The tooltip is shown in IE also even if the button is disabled.

To reproduce the problem, I used the ExtJS example 'examples/form/dynamic.js'. Add the following code


buttons: [{
id: 'btn_save',
text: 'Save'
},{
text: 'Cancel'
}]
});

simple.render(document.body);

simple.buttons[0].disable();
new Ext.ToolTip({
target: 'btn_save',
html: 'Action is not allowed'
});
It is not always possible to define whether to disable and add the tooltip while form definition. I have to do this dynamically after loading. How can I do this, so that it works also in IE?

Condor
11 Jan 2011, 7:55 AM
Tooltips work with the mouseover event. Unfortunately, IE doesn't fire mouseover events for disabled controls.

The only solution is to not disable the button. Instead, you could add a class that makes the button look disabled and add an extra check in the button handler, so it doesn't execute when the button is not allowed.

ps. Ext.Button has a setTooltip method which I would recommend instead of creating a new Ext.Tooltip.

Qtx
11 Jan 2011, 8:00 AM
Hi,

setTooltip is a great tip! It works also in IE for disabled buttons.

Thanks!

Amruta K
31 Jan 2011, 10:18 PM
In my application i have used gwt button which i am making disable on certain conditions. I have used "onDisable" method of Component class.
But this disabled button appears blur in Internet Explorer but in other browsers it looks fine.
Also "onDisable" method adds a style "x-item-disabled" to the disabled button.
I have applied my own css where i have used "x-item-disabled" to set background color and opacity for the disabled button.
Does anyone know why the button appears blur?

Condor
31 Jan 2011, 11:30 PM
You have to add a css rule to counteract the default .x-item-disabled rule:

.x-item-disabled {
opacity: .6;
-moz-opacity: .6;
filter: alpha(opacity=60);
}

optibase
31 Jan 2012, 1:21 AM
the opacity or filter: alpha does not effect the fuzziness of the text, just the visibility.
is it possible to fix the shadow or whatever ie (and only ie) does to the text in the disabled button?
in addition is it possible to change the color of the disabled text?