问题
I am trying to display a tooltip on angular UI calendarEvent's mouse-hover. I managed to do this as explained in the following thread, 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();
},
Obviously, this is not the best way to do this. With the latest UI-Bootstrap, we have a much nicer looking tooltips. Did anyone successfully integrated these tooltips with the Angular-UI Calendar?
Update 1 : As explained in http://arshaw.com/fullcalendar/docs/event_rendering/eventRender/ , I tried overriding the eventRender and simply added the tool tip attribute to the calendarEvent divs. Still not working. I can see that even the mouseover and mouseout events are not added to the those calendarEvent divs that contain 'tooltip' attribute.
回答1:
if you add this function to the calendar config it will work.
$scope.eventRender = function( event, element, view ) {
$timeout(function(){
$(element).attr('tooltip', event.title);
$compile(element)($scope);
});
};
Anything can be placed in the tooltip attribute. even {{bindings}}
The $timeout is there because $scope.$apply must be called. By using $timeout with no delay it is ensured that a digest will be called without ever throwing a "digest in progress" error.
来源:https://stackoverflow.com/questions/21107481/getting-angular-ui-calendar-to-work-with-ui-bootstrap-tooltips