PDA

View Full Version : Using tooltips on calendar panel



gr0uch0
5 Jan 2011, 2:24 PM
I'm using tooltips to display the start/end time and location of an event in the calendar panel. The tip is aimed to fire when on the 'eventover' listener is hit and it seems to work fine apart from one niggley wee thing.

The tooltip only displays on the 2nd hover attempt, the 1st doesn't show anything.

Does anyone have any ideas please?


'eventover': function(vw, rec, el) {
var time = rec.data.IsAllDay ? '' : ' \\a\\t g:i a';
var pop_content = "<div id='popup-data'><p><b>Start: </b>" +rec.data.StartDate.format('F js'+time) +"</p><p><b>Stop: </b>" +rec.data.EndDate.format('F js'+time) +"</p><p><b>Location: </b>" +rec.data.Location+"</p></div>";
new Ext.ToolTip({
target: el.id
,title: rec.data.Title
,dismissDelay: 10000 // auto hide after 10 seconds
,anchor: 'top'
,anchorOffset: 85
,trackMouse: true
,html: pop_content
});
}

justunmacharia
8 Aug 2011, 6:11 AM
Edit the target:el_id to target:el for example in the code below:
new Ext.ToolTip({
target: el
,title: rec.data.Title
,dismissDelay: 10000 // auto hide after 10 seconds
,anchor: 'top'
,anchorOffset: 85
,trackMouse: true
,html: pop_content
});

Mycoding
8 Aug 2011, 7:04 AM
The first thing you need is


Ext.QuickTips.init();

After this line


Ext.onReady(function(){

uberRobot
26 Feb 2013, 1:16 PM
I have the same issue. The tooltip doesn't appear until the second time I roll over it.