This solution does not use Angular-UI, just Angular and Bootstrap. Bootstrap is not necessarily required, just simplifies the process a bit:

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

Before I go any further, an alternative to this example would be to add a CSS class with word-wrap and white-space properties to your tooltip class. Using Chrome or Firefox's developer tool, inspect the elements until you locate the classes responsible for setting the tooltip ui; then add these properties to them in your style.css custom CSS document.

Now, for this particular solution, we create a tooltip directive and allow it to take a placement attribute to determine positioning

Angular code, where we destroy the tooltip after we are done to prevent a memory leak:

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



angular.module('test').directive('tooltip', function () {

           return {

              restrict: 'A',

              link: function (scope, element, attrs) {

                 $(element)

                         .attr('title', attrs.tooltip)

                         .tooltip({placement: attrs.placement});

                 scope.$on('$destroy', function() {

                    element.tooltip('destroy');

                 });

              }

           }

        }) 

CSS Code, where we have to override some of the Bootstrap defaults:

.tooltip-inner {

   width: auto;

   min-width: 180px;

   background-color: #c0d3d2;

   color: #000000;

   font-weight: 600;

   margin: 0 5px 0 -5px;

   /*margin-left: -5px;*/

}



/* Make tooltips opaque */

.tooltip.in { opacity: 1.8; filter: alpha(opacity=100); }

/*Change tooltip arrow color for bottom placement*/

.tooltip.bottom .tooltip-arrow {

   top: 0;

   left: 50%;

   margin-left: -5px;

   border-bottom-color: #c0d3d2;

   border-width: 0 5px 5px;

}