show event description inside tooltip during onmouseover

[Avinash-Raj]

I want to display event description inside tooltip during onmouseover. I came with this solution but it's not well and good. Is there anyway that we can use vue-popover?

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

Codepen

[BrockReece]

That is a similar technique that I have seen others use to handle something like this. I don't think you will be able to use Vue components here, as because Full calendar uses jQuery to manipulate the DOM and Vue will be unaware of the changes jQuery has made.