How to add a line break in an Angular Foundation Popover content?

Question

This seems like it should be a simple problem but it's turning out to be a lot more involved that I initially thought.

I have a couple of items inside my Angular Foundation Popover directive that i would like to separate with a line break.

.div{ 'popover' => "Name: {{ user.name }} /br Age: {{ user.age }}", 'popover-trigger' => 'click' }

What is the solution to adding a line break where the /br is in this line of html?

Answer 1

This is quite tricky. If you are using angular-foundation (and I realy recommand to use it), you can modify the official popover template to be HTML unsafe - than you can use HTML in popovers:

JS

"use strict";

// app definition - don't forget to include angular-foundation module
angular.module("app", ["mm.foundation"]);

// just o controller, nothing special
angular
  .module("app")
  .controller("MainController", MainController);

  function MainController() {
    var vm = this;

    vm.name = "John Doe"
    vm.email = "[email protected]"
  }

// unsafe filter - this is used in the template below
angular
  .module("app")
  .filter("unsafe", unsafe)

  function unsafe($sce) {
    return function (val) {
      return $sce.trustAsHtml(val);
    };
  };

// oficial popover template modification
angular
  .module("template/popover/popover.html", [])
  .run(["$templateCache", function($templateCache) {
    $templateCache.put("template/popover/popover.html",
      "<div class=\"joyride-tip-guide\" ng-class=\"{ in: isOpen(), fade: animation() }\">\n" +
      "  <span class=\"joyride-nub\" ng-class=\"{\n" +
      "    bottom: placement === 'top',\n" +
      "    left: placement === 'right',\n" +
      "    right: placement === 'left',\n" +
      "    top: placement === 'bottom'\n" +
      "  }\"></span>\n" +
      "  <div class=\"joyride-content-wrapper\">\n" +
      "    <h4 ng-bind-html=\"title | unsafe\" ng-show=\"title\"></h4>\n" +
      "    <p ng-bind-html=\"content | unsafe\"></p>\n" +
      "  </div>\n" +
      "</div>\n" +
      "");
}]);

HTML

<main ng-app="app" ng-controller="MainController as vm">
  <div class="row">
    <div class="small-12 column">
      <div popover="{{vm.name + '<br />' + vm.email}}" popover-trigger="mouseenter">
        <h1>Hover me!</h1>
      </div>
    </div>
  </div>
</main>

Here you are working CodePen example.

You can also make your own directive to have both HTML safe popovers and HTML unsafe popovers - or you can use tooltip insetead which has support for HTML unsafe by default (directive tooltip-html-unsafe).