angular ui bootstrap popover and line breaks?

[leif hanack]

Hi there, 

did anybody know how to have line breaks inside popover? Or in general is it text-only or can I "style" the content?

      <button popover-placement="bottom" popover="On the Bottom!<br/>With multi line content" class="btn">Bottom</button>

I tried <br/> and \n without success. 

http://plnkr.co/edit/?p=preview

Thanks, Leif

[leif hanack]

We solved it by moving to twitters bootstrap popover and setting html: true

angular.module('businessCard.directives', []).

  directive('businessCard', function ($interpolate) {

    var html = '<div class="name">{{name}}</div>' +

               '<div class="phone"><i class="icon icon-phone"></i> {{phone}}</div>' +

               '<div class="email"><a href="mailto:{{email}}"><i class="icon icon-email"></i> {{email}}</a></div>';

    var interpolateContentWith = $interpolate(html);

    return {

      restrict: 'A',

      link: function (scope, element, attributes) {

        var advisor = scope.$eval(attributes['businessCard']);

        var placeholderValues = {

          name: advisor.vorname + ' ' + advisor.nachname,

          phone: advisor.phone,

          email: advisor.email

        };

        var options = {

          html: true,

          trigger: 'hover',

          content: interpolateContentWith(placeholderValues)

        };

        $(element).popover(options);

      }

    }

  });