Integrating with qTip jQuery Plugin

[GoogleCodeExporter]

Before I begin, I think fullcalendar is awesome.

What steps will reproduce the problem?
1.  Hovering over events using eventMouseover with qTip jQuery plugin.
2.
3.

What is the expected output? What do you see instead?
At times, the tooltip will display perfectly.  But most of the time, it
will cause Firefox and IE to crash.  

I get the following error: "A script on this page may be busy, or it may
have stopped responding. You can stop the script now, or you can continue
to see if the script will complete.

Script: ../fullcalendar/jquery/jquery.js:19

What version of the product are you using? On what operating system?
1.1 on XP Pro.

Please provide any additional information below.

Not sure if there's a better way to do this.  I'd like to use tooltips for
the following functions:

1) eventMouseover 
2) dayClick

Original issue reported on code.google.com by KyleRe...@gmail.com on 21 May 2009 at 8:11

[GoogleCodeExporter]

Also, I'm currently using the following code: 

    eventMouseover: function(event) {
            $('td.c').qtip({
                 content: 'The eventTitle is' + event.title
                     });
            }, 

Original comment by KyleRe...@gmail.com on 21 May 2009 at 8:13

[GoogleCodeExporter]

i'm using this now for my mouseovers: 
eventMouseover: function(e,m) {
                //console.log(e);
                var tPosX = m.pageX - 5 ;
                var tPosY = m.pageY + 20 ;
                $('#tooltip').css({top: tPosY, left: tPosX, display: 'block'});
                var tt = '';
                tt += e.title+'<br />';
                $('#tooltip').html(tt);
            },
            eventMouseout: function() {
                $('#tooltip').css({display: 'none'});
            },

Maybe it helps someone or someone has a better idea of doing this ...

Paul Wolbers

Original comment by paul.wol...@gmail.com on 22 May 2009 at 10:56

[GoogleCodeExporter]

Hi Paul, I like the concept you're using.  Would you mind sharing your css for 
your
tooltip so I can get an idea of how it implements?

Original comment by KyleRe...@gmail.com on 22 May 2009 at 4:00

[GoogleCodeExporter]

<div id='loading' style='display:none'>loading...</div>
<div>
<div id='calendar'></div>
<div id="events">events</div>
</div>
<div id="tooltip" style="position:absolute;
display:none;background-color:white;border:solid 1px 
gray;padding:5px;z-index:50;" >
</div>

Original comment by paul.wol...@gmail.com on 25 May 2009 at 2:05

[GoogleCodeExporter]

Paul, thanks for your code for your homemade tooltip, that should be suitable 
for
most people.

Kyle,
It is very possible to get qTip working with FullCalendar. Instead of attaching 
the
.qtip() method in eventMouseover, attach it in the eventRender function like so:

eventRender: function(event, element) {
   element.qtip({
      content: "The event title is " + event.title
   });
}

Your script was attaching the qtip plugin to EVERY event on EVERY mouseover

Original comment by adamrs...@gmail.com on 25 May 2009 at 5:53

• Changed state: Fixed

[GoogleCodeExporter]

Thanks Adam, that was certainly it! Keep up the good work on this great 
calendar.

Original comment by KyleRe...@gmail.com on 26 May 2009 at 8:14

[GoogleCodeExporter]

adam , i have used qtip with event render
and
1. the tooltip have not appeared for me.. what necessary step do i have to 
follow. including changes in CSS nd JS.. plz let me know..
2. AS and when I use event REnder : it changes the position of my events,events 
are thn shown in the column header(overlaps MOn, tue, wed... eetc).
my event array is in file1. it is working well.
please suggest a solution as soon as posible.. 
Thanking you in anticipation

the code I have written is pasted below:->

<script type="text/javascript" src="jquery.qtip-1.0.0.min.js"></script>

<script type='text/javascript'>

    $(document).ready(function() {

        var calendar = $('#calendar').fullCalendar({

   /*           eventMouseover : function( event, element, view ) {
//alert(event);       
$(this).qtip(
{content: 'This is an active list element'}
);
even this did not worked  :(
  }, */

            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
events: "file1.js",

eventRender: function(event, element) {
   element.qtip({
      content: "The event title is " + event.title
   });
}   });
});

</script>

Original comment by 77n...@gmail.com on 20 Jun 2010 at 5:25

[GoogleCodeExporter]

here is a snapshot of what is happning..
i want the events to be displayed in the day's block..

thank you

Original comment by 77n...@gmail.com on 20 Jun 2010 at 5:47

Attachments:

• Untitled.gif

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Hello

I had the same problem. Try this:
JQuery1.4.2 + last version of qtip : 
http://bazaar.launchpad.net/~craig.craigsworks/qtip/1.0/files

Original comment by dj.sid...@gmail.com on 6 Jul 2010 at 2:02

[GoogleCodeExporter]

The same behaviour (as Comment 8 by 77nikh) I could see in my calendar when I 
applied solution proposed:
Comment 5 by adamrshaw, May 25, 2009 

Original comment by zbik...@gmail.com on 23 Jul 2010 at 11:44

[GoogleCodeExporter]

i got the same problem of comment 8..

my events stay at the table's top.

anybody got the solution already?

att,

Rafael

Original comment by rafaelb...@gmail.com on 9 Aug 2010 at 11:55

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Got same issue as in #8 upon investigation found that called eventRender as: 
    function(calEvent, element) [...]
(notice calEvent param)

while was calling qtip as 
  element.qtip({ content : event.content ,  [...]

when corrected qtip call as:
  element.qtip({ content : calEvent.content ,  [...]

everything worked as a charm
too lazy to investigate what is an issue but hopefully it will help someone.

Original comment by zergus...@gmail.com on 25 Aug 2010 at 5:03

[GoogleCodeExporter]

FIXED AGAIN:
- you need a good version of qtip: 
http://bazaar.launchpad.net/~craig.craigsworks/qtip/1.0/files/jquery.qtip-1.0.mi
n.js (not the "rc3" one from the official qtip website!)
- be prepared to add a description field in ALL of your events, if they are 
empty, the qtip will display an empty square...
- be sure to include the qtip script just before your </body> tag (AT THE END 
of your HTML code), like that:
<script type="text/javascript" src="jquery/jquery.qtip-1.0.min.js"></script> 
</body>

- The calendar code should look like this:

                   $('#calendar').fullCalendar({
            theme: true,
            header: {
                left: 'prev,next today',
                center: 'title',
                right: ''
            },
            editable: true,     
            events: [
                 {
                          title: 'test test',
                          start: new Date(y, m, d-5),
                          end: new Date(y, m, d-2),
                          description: 'yeah yeah yeah it is working now',
                          }
             ],
             eventRender: function(event, element) {
                    element.qtip({
                        content: event.description
                    }); // end of element.qtip({
             } // end of eventRender                
        });

    });

Original comment by chris.wi...@gmail.com on 27 Aug 2010 at 2:31

[GoogleCodeExporter]

I forgot to mention: do not use the old jquery-1.3.2.min.js packed with qtip, 
just leave the one from fullcalendar, loaded at the top of your HTML already. 
So the end of the HTML will look like this:

<div id='calendar'></div>
<script type="text/javascript" src="jquery/jquery.qtip-1.0.min.js"></script> 
</body>
</html>

Original comment by chris.wi...@gmail.com on 27 Aug 2010 at 2:37

[GoogleCodeExporter]

Original comment by adamrs...@gmail.com on 14 Aug 2013 at 2:11

• Changed state: Implemented

[GoogleCodeExporter]

Original comment by adamrs...@gmail.com on 14 Aug 2013 at 2:12

• Changed state: Released