AngularJS: Add line-break or HTML Elements in Angular Bootstrap UI Tooltip


In order to add line-break in tool-tip content for angular bootstrap tool-tip component, Please try to understand, There are three versions of the tool-tip: uib-tooltip, uib-tooltip-template, and uib-tooltip-html:

  • uib-tooltip – Takes text only and will escape any HTML provided.
  • uib-tooltip-html $ – Takes an expression that evaluates to an HTML string. Note that this HTML is not compiled. If compilation is required, please use the uib-tooltip-template attribute option instead. The user is responsible for ensuring the content is safe to put into the DOM!
  • uib-tooltip-template $ – Takes text that specifies the location of a template to use for the tooltip. Note that this needs to be wrapped in a tag.

In order to add HTML element like <br> for new line/line-break use uib-tooltip-html instead of uib-tooltip, make sure you have enabled $sceProvider in module config and injected $sce in relevant controller.


The $sceProvider provider allows developers to configure the $sce service.

  • enable/disable Strict Contextual Escaping (SCE) in a module
  • override the default implementation with a custom delegate


$sce is a service that provides Strict Contextual Escaping services to AngularJS.

Strict Contextual Escaping (SCE) is a mode in which AngularJS constrains bindings to only render trusted values. Its goal is to assist in writing code in a way that (a) is secure by default, and (b) makes auditing for security vulnerabilities such as XSS, clickjacking, etc. a lot easier.

Module/Controller Code:

var app = angular
                .module("tooltipApp", ['ui.bootstrap'])
                .config(function($sceProvider) {

app.controller("tooltipController", function($scope, $sce) {
    $scope.tooltipContent = $sce.trustAsHtml('Hello World </br></br>' + 
                                             'Dummy content after line-break ');

HTML Code:

<span ng-app="test" ng-controller="tooltipController">
    <span uib-tooltip-html="tooltipContent">
        Tooltip Content



One thought on “AngularJS: Add line-break or HTML Elements in Angular Bootstrap UI Tooltip

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s