Tooltip for fullcalendar in year view

问题

I want to add tooltip for the fullcalendar in year view. I tried with the below one but it added tooltip to month view. I tried with google but did not find anything related to this. Is there any other way to add a tooltip in year view?

eventMouseover: function(calEvent,jsEvent) {
            xOffset = 10;
            yOffset = 30;
            $("body").append(calEvent.tooltip);
            $("#tooltip")
                .css("top",(jsEvent.clientY - xOffset) + "px")
                .css("left",(jsEvent.clientX + yOffset) + "px")
                .fadeIn("fast");
    },
    eventMouseout: function(calEvent,jsEvent) {
        $("#tooltip").remove(); 
    }

回答1:

eventMouseover: function(calEvent, jsEvent) {
    var tooltip = '<div class="tooltipevent" style="width:100px;height:100px;background:#ccc;position:absolute;z-index:10001;">' + calEvent.title + '</div>';
    var $tooltip = $(tooltip).appendTo('body');

    $(this).mouseover(function(e) {
        $(this).css('z-index', 10000);
        $tooltip.fadeIn('500');
        $tooltip.fadeTo('10', 1.9);
    }).mousemove(function(e) {
        $tooltip.css('top', e.pageY + 10);
        $tooltip.css('left', e.pageX + 20);
    });
},

eventMouseout: function(calEvent, jsEvent) {
    $(this).css('z-index', 8);
    $('.tooltipevent').remove();
},

回答2:

You can use the html title attribute without any tooltip lib :

$('#calendar').fullCalendar({
    events: [
        {
            title: 'My Event',
            start: '2014-01-01',
            tooltip: 'This is a cool event'
        }
        // more events here
    ],
    eventRender: function(event, element) {
        element.attr('title', event.tooltip);
    }
});

回答3:

since 1.5 version, you can use qtip (i also use tipsy but it should work with tooltip) to display a tip on an event:

$('#calendar').fullCalendar({
    events: [
        {
            title: 'My Event',
            start: '2010-01-01',
            description: 'This is a cool event'
        }
        // more events here
    ],
    eventRender: function(event, element) {
        element.qtip({
            content: event.description
        });
    }
});

doc source: http://arshaw.com/fullcalendar/docs/event_rendering/eventRender/

hope this helps

回答4:

As fullcalendar has changed the events in the latest version as per the documentation I am changing the jincheng's answer with little more detailed answer

The popup will look like this

It doesn't need any js or css plugins

you can change the event data or payload with one more object for tooltip stuff and use it in your js like

        events: [
        {
            title: 'My Event',
            start: '2019-01-01',
            popup: {
                title: 'This is the title',
                descri: 'This is the description',
            }
        }
        // more events here
        ],
        eventMouseEnter: function(info) {
            var tis=info.el;
            var popup=info.event.extendedProps.popup;
            var tooltip = '<div class="tooltipevent" style="top:'+($(tis).offset().top-5)+'px;left:'+($(tis).offset().left+($(tis).width())/2)+'px"><div>' + popup.title + '</div><div>' + popup.descri + '</div></div>';
            var $tooltip = $(tooltip).appendTo('body');

//            If you want to move the tooltip on mouse movement then you can uncomment it
//            $(tis).mouseover(function(e) {
//                $(tis).css('z-index', 10000);
//                $tooltip.fadeIn('500');
//                $tooltip.fadeTo('10', 1.9);
//            }).mousemove(function(e) {
//                $tooltip.css('top', e.pageY + 10);
//                $tooltip.css('left', e.pageX + 20);
//            });
        },
        eventMouseLeave: function(info) {
            console.log('eventMouseLeave');
            $(info.el).css('z-index', 8);
            $('.tooltipevent').remove();
        },

The css for the tooltip to look like the above screenshot

.tooltipevent{
    width:200px;/*
    height:100px;*/
    background:#ccc;
    position:absolute;
    z-index:10001;
    transform:translate3d(-50%,-100%,0);
    font-size: 0.8rem;
    box-shadow: 1px 1px 3px 0px #888888;
    line-height: 1rem;
}
.tooltipevent div{
    padding:10px;
}
.tooltipevent div:first-child{
    font-weight:bold;
    color:White;
    background-color:#888888;
    border:solid 1px black;
}
.tooltipevent div:last-child{
    background-color:whitesmoke;
    position:relative;
}
.tooltipevent div:last-child::after, .tooltipevent div:last-child::before{
    width:0;
    height:0;
    border:solid 5px transparent;/*
    box-shadow: 1px 1px 2px 0px #888888;*/
    border-bottom:0;
    border-top-color:whitesmoke;
    position: absolute;
    display: block;
    content: "";
    bottom:-4px;
    left:50%;
    transform:translateX(-50%);
}
.tooltipevent div:last-child::before{
    border-top-color:#888888;
    bottom:-5px;
}

回答5:

Here another implementation

eventMouseover: function(calEvent, jsEvent) { var tooltip = '<div class="tooltipevent" style="width:130px;height:100px;background:#aed0ea;position:absolute;z-index:10001;"> Title: ' + calEvent.title + '</div>'; var $tool = $(tooltip).appendTo('body');
$(this).mouseover(function(e) {
    $(this).css('z-index', 10000);
            $tool.fadeIn('500');
            $tool.fadeTo('10', 1.9);
}).mousemove(function(e) {
    $tool.css('top', e.pageY + 10);
    $tool.css('left', e.pageX + 20);
});
},
eventMouseout: function(calEvent, jsEvent) {
$(this).css('z-index', 8);
$('.tooltipevent').remove();
},

---

来源：https://stackoverflow.com/questions/9802179/tooltip-for-fullcalendar-in-year-view