FullCalendar:在鼠标悬停时,如何告诉事件的左上角悬停?

时间:2012-02-29 22:32:44

标签: jquery fullcalendar

我正在使用Adam Shaw的FullCalendar v1.5.3。我已经得到了几乎所有可以使用它接受我正在尝试做一个“简单”的hovertip并且不能完全得到我正在寻找的东西。

我试图让我的工具提示的左侧与我正在盘旋的事件的左侧相同。而且我正试图让工具提示悬停在事件之上。

我目前使用的代码似乎给了我一个“随机”左侧和顶部鼠标进入FullCalendar事件的位置。

我目前的代码如下:

    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是页面上的一个简单范围:

<span id = "EventInfoTip">
I'm over an event
</span>

是否有可能获得我正在盘旋的当前事件的顶部和左侧?

1 个答案:

答案 0 :(得分:3)

来自docs:“在回调函数中,this设置为事件的div”元素。

因此,您可以使用$(this).offset()来获取页面中的事件div位置。

var elOffset= $(this).offset(), offsetLeft=elOffset.left,  offsetTop=elOffset.top