Tooltip not contained within gantt

Ask our community for help with v1.x versions of our products.
User avatar
mconneely
Posts: 39
Joined: Tue Jun 15, 2010 4:57 pm

Tooltip not contained within gantt

Post by mconneely » Thu Oct 28, 2010 10:40 am

Each event on my gantt chart has a tooltip. The tooltip does not stay within the gantt chart if it is displayed close to the scrollbars. Ive attached images to display the issue. This issue is not new, it was present in the previous version of the gantt. The gantt chart is nested in a number of panels, but id hope that wouldnt be the cause of the problem.
Tooltip_1.jpg
Tooltip_1.jpg (22.81 KiB) Viewed 11988 times
Tooltip_2.jpg
Tooltip_2.jpg (21.74 KiB) Viewed 11988 times
p.s - this is the code to generate the tooltop
tooltipTpl: new Ext.XTemplate(
'<h4>Test</h4>',
'<table class="taskTip">',
'{ToolTip}',
'</table>'
).compile(),

User avatar
mats
Core Developer
Core Developer
Posts: 15590
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden
Contact:

Re: Tooltip not contained within gantt

Post by mats » Thu Oct 28, 2010 11:41 am

Does this cause a problem in your application? I just searched the Ext forums and couldn't find a thread about this issue. I'm actually not sure if the Ext tooltip supports constraining of the Tooltip class. I would ask in the general Ext forums, if it's possible to constrain a Tooltip to a particual element/container as this is not related to the Gantt component. http://www.extjs.com/forum/

Let me know if you get any good answers :)
Tired of debugging javascript errors in web applications? Try our new error logging service RootCause, or read more on the Sencha blog

@bryntum
Facebook
API documentation

User avatar
mconneely
Posts: 39
Joined: Tue Jun 15, 2010 4:57 pm

Re: Tooltip not contained within gantt

Post by mconneely » Thu Oct 28, 2010 1:32 pm

mats,
i posted a question up on the ext js forum and what i was told was:

"To restrict a tooltip to an container it needs to be rendered to that container.
This is relatively easy when Ext.Gantt is using it's own tooltip instances, but it's a lot harder when it is using quicktips" . I was advised to ask you if this is the case, because i though the tooltips are rendered in the Gantt:

Code: Select all

gantt = new Sch.TreeGanttPanel({
...,
tooltipTpl: new Ext.XTemplate(
'<h4>Test</h4>',
'<table class="taskTip">',
'{ToolTip}',
'</table>'
).compile(),
...
})

User avatar
mats
Core Developer
Core Developer
Posts: 15590
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden
Contact:

Re: Tooltip not contained within gantt

Post by mats » Thu Oct 28, 2010 2:16 pm

Did some digging, you'll need the following:

Code: Select all

Ext.override(Ext.Tip, {
    showAt: function (xy) {
        Ext.Tip.superclass.show.call(this);
        if (this.measureWidth !== false && (!this.initialConfig || typeof this.initialConfig.width != 'number')) {
            this.doAutoWidth();
        }
        if (this.constrainPosition) {
            xy = this.el.adjustForConstraints(xy, this.el.parent());
        }
        this.setPagePosition(xy[0], xy[1]);
    }
});
And you'll need to override the TreeGanttPanel with this:

Code: Select all

Ext.override(Sch.TreeGanttPanel, {
    setupTooltip: function () {
                var v = this.getView(),
                    tipCfg = Ext.apply({
                        renderTo: v.scroller, // ADDED
                        delegate: this.eventSelector,
                        target: v.mainBody,
                        constrainPosition: true, // ADDED
                        listeners: {
                            beforeshow: {
                                fn: function (tip) {
                                    if (!tip.triggerElement.id) return false;

                                    var eRec = this.getEventRecordFromDomId(tip.triggerElement.id);

                                    if (!eRec || this.fireEvent('beforetooltipshow', this, eRec) === false) return false;

                                    tip.update(this.tooltipTpl.apply(eRec.data));

                                    return true;
                                },
                                scope: this
                            }
                        }
                    }, this.tipCfg);

                this.tip = new Ext.ToolTip(tipCfg);
            }
});
Tired of debugging javascript errors in web applications? Try our new error logging service RootCause, or read more on the Sencha blog

@bryntum
Facebook
API documentation

User avatar
mconneely
Posts: 39
Joined: Tue Jun 15, 2010 4:57 pm

Re: Tooltip not contained within gantt

Post by mconneely » Thu Oct 28, 2010 3:39 pm

That fix works fine until the scrollbar comes into play, so once the verical or horizontal scrollbars are moved, it changes the left corner position on the tip.

User avatar
mats
Core Developer
Core Developer
Posts: 15590
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden
Contact:

Re: Tooltip not contained within gantt

Post by mats » Thu Oct 28, 2010 3:55 pm

Try this instead:

Code: Select all

renderTo: v.el, // ADDED
Tired of debugging javascript errors in web applications? Try our new error logging service RootCause, or read more on the Sencha blog

@bryntum
Facebook
API documentation

User avatar
mconneely
Posts: 39
Joined: Tue Jun 15, 2010 4:57 pm

Re: Tooltip not contained within gantt

Post by mconneely » Thu Oct 28, 2010 4:18 pm

excellent...That seems to have worked. Cheers!

User avatar
fredmalenfant
Posts: 58
Joined: Tue Dec 11, 2012 8:15 pm

Re: Tooltip not contained within gantt

Post by fredmalenfant » Fri Mar 01, 2013 5:30 pm

Is that fix still available in the latest version?

I just tried it and I get an error when overloading treepanel.

What I would like to do is display the tooltip at the mouse position, actually it display at top right or left of my gantt line, (that can be outside the screen, under the grid) inside the gantt, or outside the gantt display zone.

User avatar
fredmalenfant
Posts: 58
Joined: Tue Dec 11, 2012 8:15 pm

Re: Tooltip not contained within gantt

Post by fredmalenfant » Fri Mar 01, 2013 5:32 pm

It can be visible on that sample:

http://www.bryntum.com/examples/gantt-l ... anced.html

Make the browser smaller, reload, tooltip the "implementation phase 1", tooltip will be over the grid.

User avatar
mats
Core Developer
Core Developer
Posts: 15590
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden
Contact:

Re: Tooltip not contained within gantt

Post by mats » Sat Mar 02, 2013 6:28 pm

Not sure I'm following, can you add a screenshot showing the issue?
Tired of debugging javascript errors in web applications? Try our new error logging service RootCause, or read more on the Sencha blog

@bryntum
Facebook
API documentation

Post Reply