qTips!

[GoogleCodeExporter]

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."

Original issue reported on code.google.com by insolen...@gmail.com on 27 Jul 2009 at 10:34

[GoogleCodeExporter]

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

Original comment by insolen...@gmail.com on 27 Jul 2009 at 10:34

[GoogleCodeExporter]

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, "<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: true }
                        });
                        return true;
                    }
                },

Original comment by aiden.so...@gmail.com on 27 Jul 2009 at 11:49

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

(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, "<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: 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.ph
p

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

Original comment by insolen...@gmail.com on 28 Jul 2009 at 3:10

[GoogleCodeExporter]

@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

Original comment by aiden.so...@gmail.com on 28 Jul 2009 at 4:49

[GoogleCodeExporter]

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.ph
p

Original comment by insolen...@gmail.com on 28 Jul 2009 at 5:43

[GoogleCodeExporter]

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.
<script src="js/events.js?v=2" type="text/javascript"></script>

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

Original comment by aiden.so...@gmail.com on 29 Jul 2009 at 12:14

[GoogleCodeExporter]

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

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

Original comment by insolen...@gmail.com on 29 Jul 2009 at 10:35

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

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

Original comment by insolen...@gmail.com on 30 Jul 2009 at 12:01

[GoogleCodeExporter]

Original comment by k.leneau@gmail.com on 8 Apr 2010 at 7:17

• Changed state: Fixed