javascriptfullcalendartooltipqtip2

qTip2 tooltip on FullCalendar shows tooltips below calendar

I have used qTip2 for tooltips. It works as I hover over the events in FullCalendar but it shows the tooltips below the calendar. What might cause the tooltips to show up below the calendar not inside the calendar?

My code is shown below:

eventRender(event, element, view) {

     console.log(event, element, view);
     element.qtip({
       prerender:true,
           content:{
             text:'<h4>'+event.title+'</h4>',
           position:{
             my:"top center",
             at:"bottom ccenter",

           },

        },

     });
   }
Solution

  • Instead of qtip, you can use tooltip (if youre using bootstrap)

    var tooltip =  event.title;
$(element).attr("data-original-title", tooltip)
$(element).tooltip({ container: "body" })