Craig told me you were working on adding qTips yourself, but I'm working on it too. I was hoping we could share some code. Here's what I posted on his forum:

"http://76.178.133.236:49999/place2place … lendar.php

Trying to have some information available in qTips above each event, but I can't figure out exactly what I should be doing. Every time an event gets picked up I destroy the qTip, when it gets dropped I can grab all the divs (if the event is broken between rows) like this: $('div[eventid=5]'), and then recreate the qTip. But, whenever I do that no qtips work on the whole page any more."

That link was: http://76.178.133.236:49999/place2place/facebook-platform/footprints/calendar.php

It might be my work proxy but when I try the link above, I keep getting a "connection refused" error. Here's my code for my qTip implementation. FYI, the use of .replace for content: was my way of cramming more information into the qTip other than just the description. The code is pretty much from a comment left on Kyle's blog. Can't find it any more - he must have deleted old comments. Hope this helps.

            onEventBlockOver: function(event) 
            {
                if ($('#Event_' + event.EventID).hasClass('hasToolTip') == false &&

event.Description != '') { $('#Event_'+ event.EventID).addClass('hasToolTip'); $('#Event_' + event.EventID).qtip( { content: (event.Description).replace(/\|/g, "
"), show: 'mouseover', hide: 'mouseout', position: { corner: { target: 'topRight', tooltip: 'bottomLeft'} }, style: { name: 'cream', border: {width: 1, radius:4}, tip: { corner: 'bottomLeft', size: {x: 20, y : 8 } }, width: {min: 200} //minimum width }, show: { ready: true } }); return true; } },

Comment deleted

(Sorry about that, I restarted my computer and forgot to restart the web server; you didn't miss much anyway :))

Anyway, since events can span across multiple div things, i.e. #Event_6_0 #Event_6_1, I just did this: $('div[eventid=' + event.EventID + ']')

Which grabs all of them, I think, but it still messes up, here's what I have now: onEventBlockOver: function(event) { //alert(event.Title + " - " + event.Description); // this = element //onEventOver($('div[eventid=' + event.EventID + ']'), event); if ($('div[eventid=' + event.EventID + ']').hasClass('hasToolTip') == false && event.Description != '') { $('div[eventid=' + event.EventID + ']').addClass('hasToolTip'); $('div[eventid=' + event.EventID + ']').qtip({ content: (event.Description).replace(/\|/g, "
"), show: 'mouseover', hide: 'mouseout', position: { corner: { target: 'topRight', tooltip: 'bottomLeft'} }, style: { name: 'cream', border: {width: 1, radius:4}, tip: { corner: 'bottomLeft', size: {x: 20, y : 8 } }, width: {min: 200} //minimum width }, show: { ready: true } }); return true; } },

That doesn't perform correctly, I think the way I'm referencing the div's is wrong, but I'm not sure. It leaves behind artifact "tips" everywhere, example: http://76.178.133.236:49999/place2place/facebook-platform/footprints/calendar.php

But I'm much closer than I was before, I think, thanks :)

@insolence9

Sorry, I forgot, I use version 1.2x because I extended Kyle's code quite a bit and was/am too lazy to refactor all of my changes.

Anyway, I think you're missing a ^ to get all of the divs. Try $('div[eventid^=' + event.EventID + ']') and I don't know how it is in 1.3x but in 1.2x, it is "id" rather than "eventid" and the id was prepended with "Event_" I'd recommend inspecting a sample event in firebug to see what's going on.

Regarding 'It leaves behind artifact "tips" everywhere' - don't know how you're implementing but when that happened to me, it was one of two things - 1) mistakes in my code, usually AJAX error and 2) OnEventDropped - my first line in this event is $("[id^='Event_']").qtip("hide");

Hope this helps, A. Soong

eventid is an attribute of the element, I checked in firebug ;)

I made your changes (hiding and ^= instead of =) and it seems to perform a bit better, but I still have fragment tips lying everywhere. Maybe I could just do a selector to find all qtip divs and destroy them OnEventDropped, because there shouldn't be any tips showing at the time of a drag + drog...?

You can see my progress @ http://76.178.133.236:49999/place2place/facebook-platform/footprints/calendar.php

Hmmm... Have you tried IE? Its weird because I tried on IE7 and everything works just fine but in FF 3.51, i see tooltips everywhere...

I'm pretty surprised that $('div[eventid^=' + event.EventID + ']').qtip("hide"); didn't work in your onEventDropped block - it works for me. but then again, I'm on jMonthCal 1.2.2

did you try removing this line? It looks like the only call to addEvents is commented out but I'm not sure if anything else is calling that function which creates also tooltips.

Last suggestion would be to go back to basics. Try adding qTip to a clean version of the demo sample and see if it works properly. If it does, work from there and add your stuff in one piece at a time. If it doesn't, then try version 1.2.2 and see if it works properly. After this, you should be able to determine what's causing your issue...

good luck! A. Soong

http://76.178.133.236:49999/place2place/facebook-platform/footprints/calendar.php

I think I've gotten pretty far, made a few changes and it all seems to work well now EXCEPT: When you first mouse over an event that spans over multiple rows, the qTip appears over both event blocks. Not sure why yet.

Thanks for all the help guys :D

Comment deleted

Weeee, got it all working :)

        onEventBlockOver: function(event) {
            var eventBlocks = $('div[eventid=' + event.EventID + ']');

            $.each(eventBlocks, function(i, eventBlock) {
                // Only show the tip immediately first block, not any others
                var showIt = i == 0 ? true : false;

                if ($(eventBlock).hasClass('hasToolTip') == false && event.Description != '')
                {
                    $(eventBlock).addClass('hasToolTip');
                    $(eventBlock).qtip( {
                        content: (event.Description).replace(/\|/g, "<br>"),
                        show: 'mouseover',
                        hide: 'mouseout',
                        position: 
                        {
                            corner: { 
                                target: 'topRight', 
                                tooltip: 'bottomLeft'
                            }
                        },
                        style: 
                        {
                            name: 'cream',
                            border: {
                                width: 1, 
                                radius:4
                            },
                            tip: { 
                                corner: 'bottomLeft',
                                size: {
                                    x: 20, 
                                    y : 8 
                                }
                            },
                            width: {
                                min: 200 //minimum width
                            } 
                        },
                        show: { 
                            ready: showIt 
                        }
                    } );
                }
            } );
        },