[OPEN-2] Ext.ToolTip

Request new features or modifications for Extensible components

[OPEN-2] Ext.ToolTip

Postby ma_gro » Tue Feb 15, 2011 1:52 am

Is there possibillity to add standard Ext.ToolTip (with information about this event) to each event? Thank you in advance.
ma_gro
 
Posts: 20
Joined: Sat Feb 12, 2011 5:09 am

Re: Ext.ToolTip

Postby brian.moeskau » Tue Feb 15, 2011 2:32 am

At the moment this is not built-in, but it is definitely planned for an upcoming release (although not yet specifically scheduled).
Personal Blog: Extraneous / Twitter: @bmoeskau / Meetup: Austin Bleeding Edge Web
User avatar
brian.moeskau
Site Admin
Site Admin
 
Posts: 1344
Joined: Sat Sep 18, 2010 5:00 pm
Location: Austin, Texas

Re: Ext.ToolTip

Postby ma_gro » Tue Feb 15, 2011 2:50 am

OK, thank you for answer. I'm sending you Polish translation (extensible-lang-pl.js).
Attachments
extensible-lang-pl.js
Polish translation (extensible-lang-pl.js)
(4.82 KiB) Downloaded 544 times
ma_gro
 
Posts: 20
Joined: Sat Feb 12, 2011 5:09 am

Re: [OPEN-2] Ext.ToolTip

Postby brian.moeskau » Sat Feb 19, 2011 12:04 am

Thanks for the translation! I've added it to Git.
Personal Blog: Extraneous / Twitter: @bmoeskau / Meetup: Austin Bleeding Edge Web
User avatar
brian.moeskau
Site Admin
Site Admin
 
Posts: 1344
Joined: Sat Sep 18, 2010 5:00 pm
Location: Austin, Texas

Re: [OPEN-2] Ext.ToolTip

Postby numbelvis » Mon Feb 21, 2011 12:50 pm

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.
numbelvis
 
Posts: 3
Joined: Tue Jan 25, 2011 11:25 am

Re: [OPEN-2] Ext.ToolTip

Postby ma_gro » Mon Feb 28, 2011 6:09 am

Thank you numbelvis, it is working OK.
ma_gro
 
Posts: 20
Joined: Sat Feb 12, 2011 5:09 am

Re: [OPEN-2] Ext.ToolTip

Postby nebbian » Tue Mar 15, 2011 6:49 am

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;
    }            
});

nebbian
 
Posts: 17
Joined: Sat Oct 30, 2010 9:22 pm

Re: [OPEN-2] Ext.ToolTip

Postby gabe.sidler » Sun Sep 25, 2011 4:48 am

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;
   }
});
User avatar
gabe.sidler
Moderator
Moderator
 
Posts: 126
Joined: Sun Sep 25, 2011 4:34 am

Re: [OPEN-2] Ext.ToolTip

Postby eggzamummy » Fri May 11, 2012 6:36 am

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.
Managing Web Consultant
www.stbwebservices.com
eggzamummy
 
Posts: 35
Joined: Tue Aug 30, 2011 10:14 am

Re: [OPEN-2] Ext.ToolTip

Postby gabe.sidler » Sat May 12, 2012 12:34 am

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
User avatar
gabe.sidler
Moderator
Moderator
 
Posts: 126
Joined: Sun Sep 25, 2011 4:34 am

Next

Return to Feature Requests

Who is online

Users browsing this forum: No registered users and 1 guest

cron