Issue 20: Integrating with qTip jQuery Plugin
Status:  Released
Owner: ----
Closed:  Aug 2013
Reported by KyleRe...@gmail.com, May 21, 2009
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

May 21, 2009
#1 KyleRe...@gmail.com
Also, I'm currently using the following code: 

	eventMouseover: function(event) {
			$('td.c').qtip({
                 content: 'The eventTitle is' + event.title
                     });
			}, 
May 22, 2009
#2 paul.wol...@gmail.com
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
May 22, 2009
#3 KyleRe...@gmail.com
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?
May 25, 2009
#4 paul.wol...@gmail.com
<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>
May 25, 2009
Project Member #5 adamrs...@gmail.com
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
Status: Fixed
May 26, 2009
#6 KyleRe...@gmail.com
Thanks Adam, that was certainly it! Keep up the good work on this great calendar.
Jun 20, 2010
#7 77n...@gmail.com
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>


Jun 20, 2010
#8 77n...@gmail.com
here is a snapshot of what is happning..
i want the events to be displayed in the day's block..

thank you
Untitled.gif
100 KB   View   Download
Jul 6, 2010
#10 dj.sid...@gmail.com
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
Jul 23, 2010
#11 zbik...@gmail.com
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 


Aug 9, 2010
#12 rafaelb...@gmail.com
i got the same problem of comment 8..

my events stay at the table's top.

anybody got the solution already?

att,

Rafael
Aug 25, 2010
#14 zergus...@gmail.com
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.
Aug 27, 2010
#15 chris.wi...@gmail.com
FIXED AGAIN:
- you need a good version of qtip: http://bazaar.launchpad.net/~craig.craigsworks/qtip/1.0/files/jquery.qtip-1.0.min.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				
		});
		
	});

Aug 27, 2010
#16 chris.wi...@gmail.com
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>
Aug 13, 2013
Project Member #17 adamrs...@gmail.com
(No comment was entered for this change.)
Status: Implemented
Aug 13, 2013
Project Member #18 adamrs...@gmail.com
(No comment was entered for this change.)
Status: Released