앵글 2 응용 프로그램의 fullcalendar 이벤트에 대한 부트 스트랩 툴팁

Question

전체 일정을 사용하여 해당 날짜의 일정을 표시하고 있습니다. 이벤트 위에 마우스를 올려 놓으면 이벤트에 대한 설명이 표시됩니다. 나는 극단적 인 왼쪽/오른쪽에있는 이벤트 위에 마우스를 올려 놓으면 일정 경계를 넘어 나타나는 툴팁이있는 기능에 대한 도움을 찾고 있습니다. 나는 그것을 알아낼 수 없다, 고마워.

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

plz 캘린더 내에서 볼 수있는 제안.

Answer 1

jQuery의 CSS를 사용하여 툴팁 위치를 지정하십시오. X 축과 Y 축을 사용자의 위치와 일치하도록 조정하십시오. 또한 캘린더에 도구 설명을 표시하려면 각도 2 전체 일정에 ChangeDetectionStrategy를 사용하십시오.

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