Hi Everyone,
I have a CSS issue (I think). I'm attempting to implement a tooltip when you hover over a date from the fullcalendar JQuery plugin and it should display a tooltip. I have everything working except the fact that the positioning of the tooltip isn't showing up at the clientY access specified (at the cursor). Here is the code.
<section id="content">
<script type='text/javascript'>
$(document).ready(function() {
$('#calendar').fullCalendar({
eventMouseover: function(calEvent,jsEvent) {
var event = $(".fc-event-title").text();
$("body").append(calEvent.tooltip);
//this is the part in question
$("#popupDate")
.css("top",(jsEvent.clientY - xOffset) + "px")
.css("left",(jsEvent.clientX + yOffset) + "px")
.fadeIn("fast");
///////////////
},
eventMouseout: function() {
$("#popupDate").remove();
},
header: {
left: 'prev,next today',
center: 'title',
draggable: false,
right: 'month,agendaWeek,agendaDay'
},
editable: false,
events: [
<? $numItems = count($events);
$c=1;?>
<? foreach($events as $key=>$event): ?>
{
id: <?=$event['id']; ?>,
title: '<?=$event['title']; ?>',
start: '<?=$event['startmonth']; ?>/<?=$event['startday']; ?>/20<?=$event['startyear']; ?>',
description: '<?=$event['brief']; ?>',
tooltip: "<div id='popupDate' class='popup_msg'><b><?=$event['title']; ?></b><br /><p id='tooltip'>0<?=$event['startmonth']; ?>/0<?=$event['startday']; ?>/<?=$event['startyear']; ?> at <?=$event['starttimehour']; ?>:0<?=$event['starttimeminute']; ?> <?=$event['starttimeampm']; ?> - 0<?=$event['endtimehour']; ?>:0<?=$event['endtimeminute']; ?> <?=$event['endtimeampm']; ?><br /><?=$event['brief']; ?></p></div>"
}
<? if($c != $numItems){echo ","; }?>
<? $c++; ?>
<? endforeach; ?>]});
});
</script>
<div id="calendar"></div>
</section>
On hover, the tooltip shows up on the far left underneath the calendar instead of by the cursor. Does anybody have any clue as to what could be causing the dynamic css to not work properly? I have nothing inside my stylesheet called #popupDate. This is generated on the fly. Could it be possible that something inside my stylesheet is overwriting this? I'll post it if I need to but it's quite a bit of code.
Thanks!