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

joshkurz · Accepted Answer · 2014-01-15 04:14:12Z

6

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.

edited Jan 15, 2014 at 4:14

answered Jan 15, 2014 at 3:32

joshkurz

1,0437 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tharaka Over a year ago

Thanks a lot for your answer. Can you explain the job of $compile() here?

joshkurz Over a year ago

Sure. $compile is taking the template DOM (the element with the newly added tooltip attribute) and running the function collectDirectives on it. This function is looking for unique values, such as tooltip. Once the unique values are collected they return a composite link function which is called with the $scope as its parameter. This ultimately combines the newly compiled element to the AngularJS scope tree and interpolates all values with that specific scope object.

joshkurz Over a year ago

I just updated the demo site to use this technique. angular-ui.github.io/ui-calendar

Collectives™ on Stack Overflow

Getting Angular UI Calendar to work with UI-Bootstrap Tooltips

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related