Results 1 to 7 of 7

Thread: [OPEN-1054] Tooltip anchoring problem

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member
    Join Date
    Mar 2009
    Posts
    96

    Default [OPEN-1054] Tooltip anchoring problem

    Hello,

    I have an issue when anchoring a tooltip, i can't seem to get the 'bl-bl' alignment to work.

    The code (only relevant code posted):
    Code:
    if(!this.eTip){
        this.eTip = new Ext.ToolTip({
            tpl:[
                '<tpl for=".">',
                    '<div>{name}:{text}</div>',
                '</tpl>'
            ]
        });
    }
    this.eTip.showBy(this.panel.body,'bl-bl');
    this.eTip.update(data.fields);
    this.eTip.showBy.defer(100,this.eTip,[this.panel.body,'bl-bl']);
    You can see the problem manifest itself in the attached screenshot.

    Calling showBy only one time renders the tooltip as seen in the first window. Making a deferred second call to showBy fixes the alignment and displays the tooltip correctly. Is there any way to fix this so that the tooltip will be displayed correctly with only one call?

    Thank you!
    Attached Images Attached Images

  2. #2
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664

    Default

    Isn't the tip empty by the first call? If yes, it cannot measure it's size. Try:
    PHP Code:
    this.eTip.update(data.fields);
    this.eTip.showBy(this.panel.body,'bl-bl'); 
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


  3. #3
    Ext JS Premium Member
    Join Date
    Mar 2009
    Posts
    96

    Default

    Quote Originally Posted by jsakalos View Post
    Isn't the tip empty by the first call? If yes, it cannot measure it's size. Try:
    PHP Code:
    this.eTip.update(data.fields);
    this.eTip.showBy(this.panel.body,'bl-bl'); 
    i changed the code to:

    Code:
    if(!this.eTip){
        this.eTip = new Ext.ToolTip({
            tpl:[
                '<tpl for=".">',
                    '<div>{name}:{text}</div>',
                '</tpl>'
            ],
            data:data.fields
        });
    }
    else {
        this.eTip.update(data.fields);
    }
    this.eTip.showBy(this.panel.body,'bl-bl');
    still, it's not working. the problem is that on the first "showBy" call, the tooltip is not rendered. calling "update" before "showBy" causes a JS crash (there's no rendered dom to update). i passed a data set on the tooltip instantiation, still no luck.

    i think the problem is in the "showBy" method. what it should do is render the tooltip with visibility hidden, calculate it's height, align it and only then set visibility to visible... i'll give it a try with an override and post the results back here

    thanks!

  4. #4
    Ext JS Premium Member
    Join Date
    Mar 2009
    Posts
    96

    Default

    I checked the library code for the "showBy" method, it seems that when the tooltip is hidden it has a style property of display set to "none". Because of this, the height of the element cannot be calculated correctly upon method call (element height return 0). I made a small modification to the code, it seems to be working now

    Original showBy method code:
    Code:
    showBy : function(el, pos){
        if(!this.rendered){
            this.render(Ext.getBody());
        }
        this.showAt(this.el.getAlignToXY(el, pos || this.defaultAlign));
    }
    Modified showBy method code:
    Code:
    showBy : function(el, pos){
        if(!this.rendered){
            this.render(Ext.getBody());
        }
        this.el.setStyle({
            display:''
        });
        this.showAt(this.el.getAlignToXY(el, pos || this.defaultAlign));
    }
    still, it needs some proper testing...just to make sure that everything else is working as it should. it might have been a bug or it might have been a feature :P

    thanks!

  5. #5
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664

    Default

    I believe this is bug, therefore, I'm moving this thread to Bugs.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


  6. #6
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,253

    Default

    I can't confirm this. Whether I delay the call or not, it still shows up as I would expect:

    Code:
    Ext.onReady(function(){
        var panel = new Ext.Panel({
            width: 400,
            height: 400,
            renderTo: document.body,
            title: 'X'
        });
        var el = panel.body;
        var eTip;
        if (!eTip) {
            eTip = new Ext.ToolTip({
                tpl: ['<tpl for=".">', '<div>{name}:{text}</div>', '</tpl>']
            });
        }
        eTip.showBy(el, 'bl-bl');
        eTip.update({
            name: 'Foo',
            text: 'Bar'
        });
        //eTip.showBy.defer(100, eTip, [el, 'bl-bl']);
        eTip.showBy(el, 'bl-bl');
    });
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  7. #7
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664

    Default

    You call showBy twice. If you delete 2nd call, after update, then it shows up. However, the "double call" can be used as workaround.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


Similar Threads

  1. [OPEN] [2.x] Tooltip bug under IE8
    By smartlit in forum Ext 2.x: Bugs
    Replies: 3
    Last Post: 23 Jul 2010, 2:02 AM
  2. [2.0] Anchoring engine problem in Internet Explorer
    By timo.nuros in forum Ext 2.x: Bugs
    Replies: 1
    Last Post: 3 Jan 2008, 9:18 AM
  3. complex forms anchoring problem [SOLVED]
    By neshaug in forum Ext 2.x: Help & Discussion
    Replies: 7
    Last Post: 9 Nov 2007, 2:17 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
  •