Getting Angular UI Calendar to work with UI-Bootstrap Tooltips

Question

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 = '

' + calEvent.description + '

'; $("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/eventRen…

Accepted Answer

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.

Getting Angular UI Calendar to work with UI-Bootstrap Tooltips

Solution

Problem

Related problems