Uib-tooltip with html unsafe

Question

I have a problem with my tooltip. I have something like this

<span uib-tooltip="{{displayName()}}"></span>

and in js file

function displayName() {
return '<div>' + 
     name +
    'div' +
    '<b>something</b>'
}

So I have escape characters and I don't know how to deal with it. Obviously, I would like to display in my tooltip properly code, without "div" etc.

How can I deal with it? I know that earlier we can use tooltip-html-unsafe, but it's deprecated now.

Answer 1

Parse the HTML as safe using the $sce service and use uib-tooltip-html as specified in the ui-bootstrap docs.

In HTML:

<span uib-tooltip-html="displayName()"></span>

In controller:

app.controller("AppCtrl", function ($scope, $sce) {
    $scope.displayName = function () {
        return $sce.parseAsHtml('<div>' + name + '</div><b>something</b>');
    }
});