Tooltip for fullcalendar in year view

Question

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

Answer 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();
},

Answer 2

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

Answer 3

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);
    }
});

Answer 4

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();
},

---

Answer 5

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;
}