I am using FullCalendar v1.5.3 by Adam Shaw. I’ve gotten almost everything to work with it accept I am trying to do a “simple” hovertip and can’t quite get what I’m looking for.
I am trying to get the left side of my tooltip to be the same as the left side of the event I’m hovering over. And I’m trying to get the tooltip to hover above the event.
The code I am currently using appears to give me a “random” left and top of where the mouse entered the FullCalendar event.
My current code looks like:
eventMouseover: function (event, jsEvent, view) {
var eventInfo = $("#EventInfoTip");
var mousex = jsEvent.pageX + 20; //Get X coodrinates
var mousey = jsEvent.pageY + 20; //Get Y coordinates
var tipWidth = eventInfo.width(); //Find width of tooltip
var tipHeight = eventInfo.height(); //Find height of tooltip
//Distance of element from the right edge of viewport
var tipVisX = $(window).width() - (mousex + tipWidth);
//Distance of element from the bottom of viewport
var tipVisY = $(window).height() - (mousey + tipHeight);
if (tipVisX < 20) { //If tooltip exceeds the X coordinate of viewport
mousex = jsEvent.pageX - tipWidth - 20;
} if (tipVisY < 20) { //If tooltip exceeds the Y coordinate of viewport
mousey = jsEvent.pageY - tipHeight - 20;
}
//Absolute position the tooltip according to mouse position
eventInfo.css({ top: mousey, left: mousex });
eventInfo.show(); //Show tool tip
} //end full calendar mouseover event
EventInfoTip is a simple span on the page:
<span id = "EventInfoTip">
I'm over an event
</span>
Is it possible to get the top and left of the current event I’m hovering over?
From docs:” Within the callback function,
thisis set to the event’s div” element.So you can use $(this).offset() to get the event div location in page.