bootstrap tooltip on fullcalendar events in angular 2 application

Question

I am using full calendar to show events on the dates. when we hover mouse over the events, it shows description of the event. I am looking help for feature that is - when i hover mouse over the event which is in extreme left/rightthe tooltips show up beyond the calendar boundaries. i am not able to figure it out, thanks.

eventRender(event, element,view) {
    var tooltip = event.title;
    $(element).attr("title", tooltip)
}

plz any suggestion to make it view within the calendar.

Answer 1

Give positioning to the tooltip using CSS from jQuery. Adjust the X and Y axis to match your positioning. Also, use ChangeDetectionStrategy for Angular 2 full calendar for the tooltip to appear on the calendar.

var tooltip = '<div class="tooltipevent p-r-10 p-l-10 p-t-10 ' + event.className + '"> + event.description + '</div>';
              var $tooltip = $(tooltip).appendTo('body');

              $(this).mouseover(function (e) {
                $(this).css('z-index', 10000);

                $tooltip.fadeIn('500');

              }).mousemove(function (e) {
                $tooltip.css('top', e.pageY + 20);
                $tooltip.css('left', e.pageX - 125);
              });