bootstrap 关于 angular 2 应用程序中完整日历事件的工具提示

Question

我正在使用完整的日历来显示日期的事件。当我们将鼠标悬停在事件上时，它会显示事件的描述。我正在寻找有关功能的帮助 - 当我将鼠标悬停在极端 left/rightthe 的事件上时，工具提示会显示在日历边界之外。我想不通，谢谢。

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

请提出任何让它在日历中查看的建议。

Answer 1

使用 jQuery 中的 CSS 为工具提示定位。调整 X 和 Y 轴以匹配您的定位。此外，使用 ChangeDetectionStrategy for Angular 2 完整日历，使工具提示显示在日历上。

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

bootstrap 关于 angular 2 应用程序中完整日历事件的工具提示

bootstrap tooltip on fullcalendar events in angular 2 application

tooltip

fullcalendar

angular