Results 1 to 6 of 6

Thread: Adding a tooltip dynamically to a disabled button in IE

  1. #1

    Default Adding a tooltip dynamically to a disabled button in IE

    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

    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?

  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    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.

  3. #3

    Default

    Hi,

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

    Thanks!

  4. #4

    Default

    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?

  5. #5
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    You have to add a css rule to counteract the default .x-item-disabled rule:
    Code:
    .x-item-disabled {
        opacity: .6;
        -moz-opacity: .6;
        filter: alpha(opacity=60);
    }

  6. #6
    Sencha User
    Join Date
    May 2010
    Posts
    16

    Default text still blurred

    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?

Similar Threads

  1. Adding things dynamically based on the click of a radio button
    By V Srinivasan in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 22 Oct 2010, 12:35 AM
  2. Dynamically changing button's icon and tooltip
    By rojar in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 9 Oct 2009, 1:46 AM
  3. Disable/enable tooltip when button is disabled/enabled
    By ryounes in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 24 Sep 2008, 7:53 AM
  4. how to change tooltip at a button dynamically ?
    By mxu in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 1 May 2008, 8:56 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •