bootstrap tooltip auf Vollkalender Ereignisse in winkel 2 Anwendung

Question

Ich verwende Vollkalender, um Ereignisse zu den Daten anzuzeigen. Wenn wir die Maus über die Ereignisse bewegen, wird eine Beschreibung des Ereignisses angezeigt. Ich suche Hilfe für Feature das ist - wenn ich Maus über das Ereignis halte, das in extrem links/rechts ist, werden die Tooltips über die Kalendergrenzen hinaus angezeigt. Ich bin nicht in der Lage, es herauszufinden, danke.

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

PLZ jeden Vorschlag, um es in den Kalender zu sehen.

Answer 1

Positionieren Sie den Tooltip mithilfe von CSS aus jQuery. Passen Sie die X- und Y-Achse an Ihre Position an. Verwenden Sie auch ChangeDetectionStrategy für Angular 2 Vollkalender, damit die QuickInfo im Kalender angezeigt wird.

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