Angular: Multiline tooltip

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
  Hello, {{name}}!
  <div ng-repeat="string in stringArray">	
    {{ string }}
  </div>
  <div data-placement="right" title="{{ stringArray.join('<br>') }}" tooltip>tooltip</div>
</div>

JavaScript

var myApp = angular.module('myApp',[]);

//myApp.factory('myService', function() {});

function MyCtrl($scope) {
  $scope.name = 'Superhero';
  $scope.stringArray = 	["Demo Store1","Demo Shop2","Test Deactivate"];
}

myApp.directive('tooltip', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs){
            $(element).hover(function(){
                $(element).tooltip('show');
            }, function(){
                $(element).tooltip('hide');
            });
        }
    };
});