[OPEN-2] Ext.ToolTip

[ma_gro]

Is there possibillity to add standard Ext.ToolTip (with information about this event) to each event? Thank you in advance.

[brian.moeskau]

At the moment this is not built-in, but it is definitely planned for an upcoming release (although not yet specifically scheduled).

[ma_gro]

OK, thank you for answer. I'm sending you Polish translation (extensible-lang-pl.js).

[brian.moeskau]

Thanks for the translation! I've added it to Git.

[numbelvis]

Hi, ma_gro I was looking for this feature also and until it is built in, you can accomplish tooltips by adjusting the getEventTemplate method of Ext.ensible.cal.DayBodyView and Ext.ensible.cal.MonthView. In those methods there are template strings being created..

You can add

qtip="<b>{Title}</b><br/>{Description}"

to the appropriate div and will get tooltips.


Be sure you are executing Ext.QuickTips.init(); so Ext witll show them.

[ma_gro]

Thank you numbelvis, it is working OK.

[nebbian]

Thanks for the above ideas, this is working well in my application.


For the impatient, just copy and paste this code into your project (it means you don't need to modify the original source code of extensible):

Code: Select all

Ext.QuickTips.init();

Ext.override(Ext.ensible.cal.DayBodyView, {
    getEventTemplate : function(){
        if(!this.eventTpl){
            this.eventTpl = !(Ext.isIE || Ext.isOpera) ?
                new Ext.XTemplate(
                    '<div  qtip="<b>{Title}</b><br/>{Description}" id="{_elId}" class="{_extraCls} ext-cal-evt ext-cal-evr" style="left: {_left}%; width: {_width}%; top: {_top}px; height: {_height}px;">',
                        '<div class="ext-evt-bd">', this.getEventBodyMarkup(), '</div>',
                        this.enableEventResize ? '<div class="ext-evt-rsz"><div class="ext-evt-rsz-h">&#160;</div></div>' : '',
                    '</div>'
                )
                : new Ext.XTemplate(
                    '<div qtip="<b>{Title}</b><br/>{Description}" id="{_elId}" class="ext-cal-evt {_extraCls}" style="left: {_left}%; width: {_width}%; top: {_top}px;">',
                        '<div class="ext-cal-evb">&#160;</div>',
                        '<dl style="height: {_height}px;" class="ext-cal-evdm">',
                            '<dd class="ext-evt-bd">',
                                this.getEventBodyMarkup(),
                            '</dd>',
                            this.enableEventResize ? '<div class="ext-evt-rsz"><div class="ext-evt-rsz-h">&#160;</div></div>' : '',
                        '</dl>',
                        '<div class="ext-cal-evb">&#160;</div>',
                    '</div>'
                );
            this.eventTpl.compile();
        }
        return this.eventTpl;
    }            
});



[gabe.sidler]

The solution above by nebbian worked well for me but it is for EXT JS 3.X and Extensible 1.0.

Here is a modified version of the source code that works with EXT JS 4 and Extensible 1.5 Beta:

Code: Select all

Ext.tip.QuickTipManager.init();

Extensible.calendar.view.DayBody.override({
   getEventTemplate : function(){
      if(!this.eventTpl){
         this.eventTpl = !(Ext.isIE || Ext.isOpera) ?
            Ext.create('Ext.XTemplate',
               '<div data-qtip="<b>{Title}</b><br/>{Notes}" id="{_elId}" class="{_extraCls} ext-cal-evt ext-cal-evr" style="left: {_left}%; width: {_width}%; top: {_top}px; height: {_height}px;">',
                  '<div class="ext-evt-bd">', this.getEventBodyMarkup(), '</div>',
                  this.enableEventResize ? '<div class="ext-evt-rsz"><div class="ext-evt-rsz-h">&#160;</div></div>' : '',
               '</div>'
            )
            : Ext.create('Ext.XTemplate',
               '<div data-qtip="<b>{Title}</b><br/>{Notes}" id="{_elId}" class="ext-cal-evt {_extraCls}" style="left: {_left}%; width: {_width}%; top: {_top}px;">',
                  '<div class="ext-cal-evb">&#160;</div>',
                  '<dl style="height: {_height}px;" class="ext-cal-evdm">',
                     '<dd class="ext-evt-bd">',
                        this.getEventBodyMarkup(),
                     '</dd>',
                     this.enableEventResize ? '<div class="ext-evt-rsz"><div class="ext-evt-rsz-h">&#160;</div></div>' : '',
                  '</dl>',
                  '<div class="ext-cal-evb">&#160;</div>',
               '</div>'
            );
         this.eventTpl.compile();
      }
      return this.eventTpl;
   }
});


Note also that similar changes are necessary for month view. Here is the necessary source code:

Code: Select all

Extensible.calendar.view.Month.override({
   getEventTemplate : function(){
      if(!this.eventTpl){
         var tpl, body = this.getEventBodyMarkup();

         tpl = !(Ext.isIE || Ext.isOpera) ?
            Ext.create('Ext.XTemplate',
               '<div data-qtip="<b>{Title}</b><br/>{Notes}" class="{_extraCls} {spanCls} ext-cal-evt ext-cal-evr">',
                  body,
               '</div>'
            )
            : Ext.create('Ext.XTemplate',
               '<tpl if="_renderAsAllDay">',
                  '<div data-qtip="<b>{Title}</b><br/>{Notes}" class="{_extraCls} {spanCls} ext-cal-evt ext-cal-evo">',
                     '<div class="ext-cal-evm">',
                        '<div class="ext-cal-evi">',
               '</tpl>',
               '<tpl if="!_renderAsAllDay">',
                  '<div data-qtip="<b>{Title}</b><br/>{Notes}" class="{_extraCls} ext-cal-evt ext-cal-evr">',
               '</tpl>',
               body,
               '<tpl if="_renderAsAllDay">',
                        '</div>',
                     '</div>',
               '</tpl>',
                  '</div>'
            );
         tpl.compile();
         this.eventTpl = tpl;
      }
      return this.eventTpl;
   }
});


[eggzamummy]

I'm having an issue with this. I added the override and it's showing the markup in the DIV, but when I hover over the event in the calendar I do not get the qtip. I have other qtips in my calendar and they are working, just not the ones for the events.

[gabe.sidler]

Hi Eggzamummy,
Here a few things to check/try.

Are you initializing the quick tips manager somewhere?

Code: Select all

Ext.tip.QuickTipManager.init();

Try to replace the dynamic quicktip text with a static text, for example:

Code: Select all

data-qtip="Hallo world"

Does this make a differenence?

What version of the Ext/JS and Extensible framework are you using? My example worked for EXT JS 4.0.7 and Extensible 1.5 Beta.$

If all else fails, post the content of the overriden function getEventTemplate() and I will try it out with my application.

Gabe