Button tooltip covers up part of the button when at bottom right of window

**dpchrist** · 11 Jul 2012, 6:38 AM

REQUIRED INFORMATION

Ext version tested:

4.1
4.1.1

Browser versions tested against:

IE9
FF 13.0.01
Chrome 20.0.1132.47

DOCTYPE tested against:

See the example

Description:

When a button is located in the bottom right of the screen, the tooltip should shift to the left of the button. Instead, it partially covers the button so the button click will not be registered.

Steps to reproduce the problem:

Run the example code.
Resize the window to be the size of the ExtJS window.
Hover over the "Hover Error" button. (This is just an easy way to reproduce the problem. We have this exact issue in our application but reproducing that layout in an example would be very difficult. In our case, the window is maximized, but we happen to have a button at the bottom right corner of the screen.

The result that was expected:

The tooltip will show to the left of the button and not cover up the button where the mouse is located.

The result that occurs instead:

Depending on the browser, the toolip will cover up the top or the bottom of the browser and the mouse click will be lost because the tooltip is accepting the click.

Test Case:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Button Hover-Over Test</title>


        <link rel="stylesheet" type="text/css" href="../extjs4/resources/css/ext-all.css" />


        <script type="text/javascript"  src="../extjs4/ext-debug.js"></script>




        <script type="text/javascript">
            Ext.require('Ext.form.*');


            Ext.onReady(function() {
                Ext.tip.QuickTipManager.init();
                Ext.createWidget('form', {
                    renderTo:  Ext.getBody(),
                    title: 'Number fields with spinner',
                    bodyPadding: 5,
                    frame: true,
                    width: 340,
                    fieldDefaults: {
                        labelAlign: 'left',
                        labelWidth: 105,
                        anchor: '100%'
                    },
                    items: [{
                            xtype: 'numberfield',
                            fieldLabel: 'Default',
                            name: 'number1',
                            value: 1,
                            minValue: 1,
                            maxValue: 125
                        },
                        {
                            xtype: 'numberfield',
                            fieldLabel: 'With a step of 0.4',
                            name: 'number2',
                            minValue: -100,
                            maxValue: 100,
                            allowDecimals: true,
                            decimalPrecision: 1,
                            step: 0.4
                        },
                        {
                            xtype: 'button',
                            text: 'Button 1',
                            tooltip: 'Click this button to execute Button 1',
                            handler: function(btn) {
                                var vForm = btn.up('form');
                                vField.setReadOnly(!vField.readOnly);
                            }
                        },
                        {
                            xtype: 'button',
                            text: 'Button 2',
                            tooltip: 'Click this button to execute Button 2',
                            handler: function(btn) {
                                var vForm = btn.up('form');
                                vField.setReadOnly(!vField.readOnly);
                            }
                        },
                        {
                            xtype: 'button',
                            text: 'Button 3',
                            tooltip: 'Click this button to execute Button 3',
                            handler: function(btn) {
                                var vForm = btn.up('form');
                                vField.setReadOnly(!vField.readOnly);
                            }
                        },
                        {
                            xtype: 'button',
                            text: 'Button 4',
                            tooltip: 'Click this button to execute Button 4',
                            handler: function(btn) {
                                var vForm = btn.up('form');
                                vField.setReadOnly(!vField.readOnly);
                            }
                        },
                        {
                            xtype: 'button',
                            text: 'Hover Error',
                            tooltip: 'Click this button to load a record',
                            handler: function(btn) {
                                var vForm = btn.up('form');
                                vField.setReadOnly(!vField.readOnly);
                            }
                        }
                    ]
                });
            });
        </script>
    </head>


    <body>
    </body>
</html>

HELPFUL INFORMATION

Screenshot or Video:

attached

Debugging already done:

none

Possible fix:

not provided

Additional CSS used:

only default ext-all.css

Operating System:

Windows 7

**mitchellsimoens** · 11 Jul 2012, 6:43 AM

You can use a Window instead of a form to move it instead of resizing the browser:

Code:

Ext.tip.QuickTipManager.init();
Ext.create('Ext.window.Window', {
    autoShow      : true,
    constrain     : true,
    title         : 'Number fields with spinner',
    bodyPadding   : 5,
    frame         : true,
    width         : 340,
    fieldDefaults : {
        labelAlign : 'left',
        labelWidth : 105,
        anchor     : '100%'
    },
    items         : [
        {
            xtype      : 'numberfield',
            fieldLabel : 'Default',
            name       : 'number1',
            value      : 1,
            minValue   : 1,
            maxValue   : 125
        },
        {
            xtype            : 'numberfield',
            fieldLabel       : 'With a step of 0.4',
            name             : 'number2',
            minValue         : -100,
            maxValue         : 100,
            allowDecimals    : true,
            decimalPrecision : 1,
            step             : 0.4
        },
        {
            xtype   : 'button',
            text    : 'Button 1',
            tooltip : 'Click this button to execute Button 1',
            handler : function (btn) {
                var vForm = btn.up('form');
                vField.setReadOnly(!vField.readOnly);
            }
        },
        {
            xtype   : 'button',
            text    : 'Button 2',
            tooltip : 'Click this button to execute Button 2',
            handler : function (btn) {
                var vForm = btn.up('form');
                vField.setReadOnly(!vField.readOnly);
            }
        },
        {
            xtype   : 'button',
            text    : 'Button 3',
            tooltip : 'Click this button to execute Button 3',
            handler : function (btn) {
                var vForm = btn.up('form');
                vField.setReadOnly(!vField.readOnly);
            }
        },
        {
            xtype   : 'button',
            text    : 'Button 4',
            tooltip : 'Click this button to execute Button 4',
            handler : function (btn) {
                var vForm = btn.up('form');
                vField.setReadOnly(!vField.readOnly);
            }
        },
        {
            xtype   : 'button',
            text    : 'Hover Error',
            tooltip : 'Click this button to load a record',
            handler : function (btn) {
                var vForm = btn.up('form');
                vField.setReadOnly(!vField.readOnly);
            }
        }
    ]
});

We also have an internal bug reported for this same thing.

**dpchrist** · 11 Jul 2012, 6:46 AM

Thanks for the quick reply.

**SpecialAgent** · 9 May 2016, 12:27 AM

This Bug is almost present in ExtJS 6!

**dpchrist** · 9 May 2016, 2:56 AM

After almost 4 years, I don't think Sencha is even considering fixing this bug. We just upgraded to ExtJS 6 and I just tested the other day to see that the issue still exists.

Thread: Button tooltip covers up part of the button when at bottom right of window

Thread Tools

Search Thread

Display

Button tooltip covers up part of the button when at bottom right of window

Tags for this Thread

Posting Permissions

Stay Connected

Stay Connected

Sign up for Sencha News