我正在尝试在 Angular UI calendarEvent 的鼠标悬停上显示工具提示。我设法做到了这一点,如以下线程中所述,年视图中全日历的工具提示 https://stackoverflow.com/questions/9802179/tooltip-for-fullcalendar-in-year-view
$scope.eventMouseover = function (calEvent, jsEvent) {
var tooltip = '<div class="tooltipevent">' + calEvent.description + '</div>';
$("body").append(tooltip);
$(this).mouseover(function (e) {
$(this).css('z-index', 10000);
$('.tooltipevent').fadeIn('500');
$('.tooltipevent').fadeTo('10', 1.9);
}).mousemove(function (e) {
$('.tooltipevent').css('top', e.pageY + 10);
$('.tooltipevent').css('left', e.pageX + 20);
});
}
$scope.eventMouseout = function (calEvent, jsEvent) {
$(this).css('z-index', 8);
$('.tooltipevent').remove();
},
显然,这不是最好的方法。借助最新的 UI-Bootstrap,我们拥有了更加美观的工具提示。有人成功地将这些工具提示与 Angular-UI 日历集成吗?
Update 1: 正如中所解释的http://arshaw.com/fullcalendar/docs/event_rendering/eventRender/ http://arshaw.com/fullcalendar/docs/event_rendering/eventRender/,我尝试重写 eventRender 并简单地将工具提示属性添加到 calendarEvent div 中。还是行不通。我可以看到,即使是 mouseover 和 mouseout 事件也没有添加到那些包含“tooltip”属性的 calendarEvent div 中。
如果您将此功能添加到日历配置中,它将起作用。
$scope.eventRender = function( event, element, view ) {
$timeout(function(){
$(element).attr('tooltip', event.title);
$compile(element)($scope);
});
};
任何内容都可以放置在工具提示属性中。甚至{{绑定}}
$timeout 之所以存在,是因为必须调用 $scope.$apply。通过无延迟地使用 $timeout ,可以确保调用摘要而不会抛出“摘要正在进行”错误。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)