How to show HTML formatted content in Tooltip? (UI Calendar)

Question

I'm trying to display content on multiple lines in the tooltip of calendar entry for UI Calendar and it is not working.

Here is the code

$scope.onEventRender = function(event, element, view) {
    if(event.hover_data) {
        $timeout(function(){
            var hdata = event.hover_data.join('<br />');
            element.attr({'tooltip': hdata, 'tooltip-append-to-body': true});
            $compile(element)($scope);
        });
    }
}

Here is how it looks

Please let me know what I'm doing wrong.

Answer 1

There is no tooltip functionality in ui-calendar. You are probably using bootstrap-ui-tooltip. Besides tooltip it also has a property tooltip-html-unsafe (since v0.3.0, released on 1 May 2013), it was renamed lately. You can read about it in some old documenatation

I made a plunker with html content tooltips

Answer 2

Stuff that worked for me. Might be useful for someone else

var tooltipText = ['Tooltip', 'text', 'to', 'be', 'split'];

$(element).tooltip({html: true, title: tooltipText.join('</br>')});