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.

Hi, have you found the solution? It looks like there isn't simple solution when context is HTML and should be dynamic. If template of the tooltip doesn't change only content it can (I'm trying to implement it right now) be done by using custom directive. — Anatoly, Feb 13 '16 at 10:01
Actually, I was using older version and didn't try with uib-tooltip-template. — jagmohan, Feb 15 '16 at 11:21
@jagmohan Is this link that you are looking for . it has popups look at js fiddle link below http://jsfiddle.net/craga89/N78hs/ — Heemanshu Bhalla, Feb 19 '16 at 18:31
@ChintanMirani I'm using the tooltip from ui calendar itself. — jagmohan, Feb 20 '16 at 07:21

score 2 · Answer 1 · answered Sep 12 '19 at 12:36

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>')});

answered Sep 12 '19 at 12:36

mr_meeseeks

33
7

score 1 · Answer 2 · edited Mar 31 '20 at 02:40

1

You doesn't able to show HTML formatted text in default plain browser tooltip. Instead of browser tooltip you should use some third party javascript libraries for showing full formatted tooltips.

Libraries such as:

jQuery ui tooltip: https://jqueryui.com/tooltip/
Twitter bootstrap tooltip: http://getbootstrap.com/javascript/

edited Mar 31 '20 at 02:40

Jan

424
5
15

answered Feb 19 '16 at 21:00

Mojtaba

514
9
19

Grin · Answer 3 · 2016-02-20T15:01:08.427

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

edited Feb 20 '16 at 15:01

answered Feb 20 '16 at 14:45

Grin

6,082
2
22
15

You solution 'almost' works, but the problem that it's applicable with old version of the bootstrap, I couldn't cause it work with the new version of bootstrap and `uib-tooltip-html` https://plnkr.co/edit/o5MJM4t5SM5QzFo12W0q?p=preview, Actually I have solved this problem by writing my own directive which use behind the scenes plain bootstrap jquery component, I'm not satisfied with this workaround and looking for a native angular solution if it's possible. – Anatoly Feb 20 '16 at 15:08

score 0 · Answer 4 · answered Feb 22 '16 at 05:06

0

@jagmohan try this.

$( element ).tooltip({
    content: hdata
});

This works for me.

answered Feb 22 '16 at 05:06

Chintan Mirani

1,464
9
18

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

4 Answers4