如何在Tooltip中显示HTML格式的内容？ （UI日历）

Question

我尝试在UI日历的日历条目的工具提示中显示多行内容，但它无效。

这是代码

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

以下是它的外观

请让我知道我做错了什么。

Answer 1

您无法在deafult普通浏览器工具提示中显示HTML格式的文本。 您应该使用某些第三方JavaScript库来显示完整格式化的工具提示，而不是浏览器工具提示。 图书馆如：

jQuery ui工具提示：https://jqueryui.com/tooltip/

或Twitter bootstrap工具提示：http://getbootstrap.com/javascript/

Answer 2

ui-calendar中没有工具提示功能。您可能正在使用bootstrap-ui-tooltip。除了tooltip之外，它还有一个属性tooltip-html-unsafe（从2013年5月1日发布的v0.3.0开始），它最近被重命名。 您可以在some old documenatation

中阅读相关内容

我使用html内容工具提示制作了plunker

Answer 3

@jagmohan试试这个。

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

这适合我。

Answer 4

对我有用的东西。可能对其他人有用

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

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