[OPEN] [#1316] [2.x] Tooltip is not shown when it is overflowed

Page 1 of 2 12 LastLast
  1. #1

    [OPEN] [#1316] [2.x] Tooltip is not shown when it is overflowed

    Hi follks, i have a window that contains two button (_btnDoNotClick and _btnClick) on it's toolbar. The _btnClick is overflowed and when it is clicked, the event is not fired. Going further, the ToolTip of _btnClick is not shown on the same situation.

    To reproduce the problem, run the following example, click (Handler) and leave the mouse over (ToolTip) _btnClick.

    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <ext:Window ID="Window1" runat="server" Title="Ext.Net" Closable="false" Height="250"
        Width="160">
        <TopBar>
            <ext:Toolbar ID="Toolbar1" runat="server" EnableOverflow="true">
                <Items>
                    <ext:Button ID="_btnDoNotClick" Icon="Accept" Text="Do not click me" runat="server" />
                    <ext:Button ID="_btnClick" Icon="Error" Text="Click ME!!!" runat="server">
                        <Listeners>
                            <Click Handler="alert('it is working');" />
                        </Listeners>
                        <ToolTips>
                            <ext:ToolTip runat="server" Title="Ext" Html="Net" />
                        </ToolTips>
                    </ext:Button>
                </Items>
            </ext:Toolbar>
        </TopBar>
        <Content>
            <p>
                Click on the hidden button up ahead</p>
        </Content>
    </ext:Window>
    It's possible to overcome these issues by setting Button's handler property instead of using Button's click listener and by setting Button's ToolTip property instead of using the inner ToolTip property. Please replace the lines 08 to 15 by the following one:

    <ext:Button ID="_btnClick" Icon="Error" Text="Click ME!!!" Handler="alert('it is working');" ToolTip="Ext.Net" runat="server" />
    But in my scenario it's not possible to overcome the ToolTip's problem, because the ToolTip must have a Title and a Message, and on the previous approach, it's only possible to set ToolTip's message.

    I would like to know whether the handler approach is acceptable (i prefer to use the click listener) and whether it's possible to fix the Button's ToolTip.

    Thanks in Advance

    EDIT: Original topic:
    Button's click event is not being fired and the tooltip is not shown when it is overflowed

    Changed to reflect current state of the issue. (there were two issues here before!)
    Last edited by fabricio.murta; Apr 26, 2016 at 9:55 PM.
  2. #2
    Hi Raphael,

    Re: ToolTip

    Thank you for the report. We will look what we can do with that issue. Though I am not sure there is an elegant solution for this case.

    Anyway, I can suggest this property for the Button.
    ToolTip="={{ title: 'Ext', text: 'Net' }}"
    There are two moments:

    1. ={} is for getting the value rendered in Raw mode, i.e. without quotes.
    2. You can set a QuickTips config object as a ToolTip's value.

    See also
    http://docs.sencha.com/ext-js/4-1/#!...on-cfg-tooltip
    http://docs.sencha.com/ext-js/4-1/#!...uickTipManager

    Re: a Click listener

    We are investigating further. Thank you for the report.
    Last edited by Daniil; Jan 29, 2015 at 4:42 PM.
  3. #3
    Quote Originally Posted by Daniil View Post
    Hi Raphael,

    Re: ToolTip

    Thank you for the report. We will look what we can do with that issue. Though I am sure there is an elegant solution for this case.

    Anyway, I can suggest this property for the Button.
    ToolTip="={{ title: 'Ext', text: 'Net' }}"
    There are two moments:

    1. ={} is for getting the value rendered in Raw mode, i.e. without quotes.
    2. You can set a QuickTips config object as a ToolTip's value.

    See also
    http://docs.sencha.com/ext-js/4-1/#!...on-cfg-tooltip
    http://docs.sencha.com/ext-js/4-1/#!...uickTipManager
    I forgot about a QTipConfig property.

    Example
    <ext:Button Text="Hover me" runat="server">
        <QTipCfg Title="Title" Text="Text" />
    </ext:Button>
  4. #4
    Quote Originally Posted by Daniil View Post
    Re: a Click listener

    We are investigating further. Thank you for the report.
    Here is a bug report to Sencha.
    http://www.sencha.com/forum/showthread.php?247684

    Using a Handler appears to be a stable workaround. Generally, it is just a shorthand for a click listener.
  5. #5
    Thank you Daniil, please keep me posted.
  6. #6
    Sencha opened a bug ticket. We will monitor.
  7. #7
    After updating from SVN, the issue has gone away, as you can verify if you run the following (unmodified) sample code:
    <ext:Window ID="Window1" runat="server" Title="Ext.Net" Closable="false" Height="250"
        Width="160">
        <TopBar>
            <ext:Toolbar ID="Toolbar1" runat="server" EnableOverflow="true">
                <Items>
                    <ext:Button ID="_btnDoNotClick" Icon="Accept" Text="Do not click me" runat="server" />
                    <ext:Button ID="_btnClick" Icon="Error" Text="Click ME!!!" runat="server">
                        <Listeners>
                            <Click Handler="alert('it is working');" />
                        </Listeners>
                        <ToolTips>
                            <ext:ToolTip ID="ToolTip1" runat="server" Title="Ext" Html="Net" />
                        </ToolTips>
                    </ext:Button>
                </Items>
            </ext:Toolbar>
        </TopBar>
        <Content>
            <p>
                Click on the hidden button up ahead</p>
        </Content>
    </ext:Window>

    But still there is an issue regarding the execution of click handler. Please run the following example and click the _btnClick Button and you can see that when it goes to an overflow Toolbar's menu a new element (MenuItem) is created.
    <ext:Window ID="Window1" runat="server" Title="Ext.Net" Closable="false" Height="250"
        Width="160">
        <TopBar>
            <ext:Toolbar ID="Toolbar1" runat="server" EnableOverflow="true">
                <Items>
                    <ext:Button ID="_btnDoNotClick" Icon="StarSilver" Text="Do not click me" runat="server" />
                    <ext:Button ID="_btnClick" Icon="Star" Text="Click ME!!!" runat="server">
                        <Listeners>
                            <Click Handler="analizeBehaviour(item);" />
                        </Listeners>
                    </ext:Button>
                </Items>
            </ext:Toolbar>
        </TopBar>
        <Content>
            <p>
                Click on the hidden button up ahead</p>
        </Content>
    </ext:Window>
    <script type="text/javascript">
        var analizeBehaviour = function (btn) {
            alert(Ext.net.StringUtils.format("The controls are different. Button ID = {0} - Menu Item ID = {1}", App._btnClick.id, btn.id))
        }
    </script>
    In my real-world scenario, i have a button to mark/unmark an application as favourite. But it's not possible to achieve it, because when i set the icon of the button - passed to the function as btn parameter, it's not the real button.
    <script type="text/javascript">
        var analizeBehaviour = function (btn) {
            var iconStar = "icon-star";
            var iconStarSilver = "icon-starsilver";
            if (btn.iconCls == iconStar) {
                btn.setIconCls(iconStarSilver);
            }
            else {
                btn.setIconCls(iconStar);
            }
        }
    </script>
    But it works if i set the icon of the App._btnClick
    <script type="text/javascript">
        var analizeBehaviour = function (btn) {
            var iconStar = "icon-star";
            var iconStarSilver = "icon-starsilver";
            if (App._btnClick.iconCls == iconStar) {
                App._btnClick.setIconCls(iconStarSilver);
            }
            else {
                App._btnClick.setIconCls(iconStar);
            }
        }
    </script>
    i can't understand why the icon of MenuItem does not change if, in fact, it is the element that is being shown. It is confusing, the need of setting the icon of the element that is not being shown.
    Last edited by RCN; Nov 06, 2012 at 6:36 PM.
  8. #8
    Please clarify did you update from "trunk"? ExtJS has been rolled back to ExtJS 4.1.1 in trunk, because it is the latest public release. And yes, the issue is not reproducible in ExtJS 4.1.1.

    But it is still there in 2.1 branch.

    Regarding the problem.

    An overflow handler creates a new menu item each time then a menu opens. Actually, it is a clone of a Toolbar's real item. This clone is a new component, therefore actions with a real item (which is just hidden) doesn't affect on its clone.

    To access this clone you can use an overflowClone property.
    App._btnClick.overflowClone
  9. #9
    Opened an Issue to track this defect, see

    https://github.com/extnet/Ext.NET/issues/21
  10. #10
    Hi Daniil, i would like to know whether there is any update regarding this issue. As far i can see, Ext.Net is using Ext.Js 4.2, so it's not using the "rolled back" version anymore.

    Thanks in advance
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 3
    Last Post: Mar 18, 2015, 2:56 PM
  2. [CLOSED] Ajax ToolTip fails when Toolbar's item is overflowed.
    By RCN in forum 2.x Legacy Premium Help
    Replies: 13
    Last Post: Aug 07, 2013, 1:02 PM
  3. Replies: 7
    Last Post: May 31, 2013, 12:51 PM
  4. [CLOSED] GridPanel cell tooltip only when data is overflowed
    By RCN in forum 2.x Legacy Premium Help
    Replies: 6
    Last Post: Dec 28, 2012, 10:06 AM
  5. Replies: 2
    Last Post: Aug 05, 2010, 6:39 PM

Posting Permissions