Angular UIBootstrap popover error

Question

Getting an example from http://angular-ui.github.io/bootstrap/ and following instructions I did :

<button popover="I appeared on mouse enter!" popover-trigger="mouseenter" class="btn btn-default">Mouseenter</button>

and when I moved mouse over button I got:

1. Uncaught TypeError: Cannot read property 'split' of undefined ui-bootstrap-tpls-0.11.2.min.js:8
2. positionElementsui-bootstrap-tpls-0.11.2.min.js:8
3. zui-bootstrap-tpls-0.11.2.min.js:9
4. pui-bootstrap-tpls-0.11.2.min.js:9
5. kui-bootstrap-tpls-0.11.2.min.js:9
6. b.event.special.(anonymous function).handlejquery.min.js:4
7. b.event.dispatchjquery.min.js:3
8. v.handlejquery.min.js:3

There I found an instruction : "The popover directives require the $position service." But have no idea what does it mean. I am a beginner so please help me. Maybe some initialization needs? I cannot find it on official website

Answer 1

Specifying popover-placement fixed the problem for me.

Example:

<input type="number"
       popover-placement="top"
       popover="This is some text that explains something"
       popover-trigger="focus">

Answer 2

There seems to be a problem with placement/position of tooltips, and popovers. It has something to do with the changes to angular.isDefined which works differently in AngularJS 1.2 & 1.3

Here are a few directives to patch the issues by setting defaults

        // Bootstrap UI fixes after upgrading to Angular 1.3
        .directive('tooltip', function() {
            return {
                restrict: 'EA',
                link: function(scope, element, attrs) {
                    attrs.tooltipPlacement = attrs.tooltipPlacement || 'top';
                    attrs.tooltipAnimation = attrs.tooltipAnimation || true;
                    attrs.tooltipPopupDelay = attrs.tooltipPopupDelay || 0;
                    attrs.tooltipTrigger = attrs.tooltipTrigger || 'mouseenter';
                    attrs.tooltipAppendToBody = attrs.tooltipAppendToBody || false;
                }
            }
        })

        .directive('popover', function() {
            return {
                restrict: 'EA',
                link: function(scope, element, attrs) {
                    attrs.popoverPlacement = attrs.popoverPlacement || 'top';
                    attrs.popoverAnimation = attrs.popoverAnimation || true;
                    attrs.popoverPopupDelay = attrs.popoverPopupDelay || 0;
                    attrs.popoverTrigger = attrs.popoverTrigger || 'mouseenter';
                    attrs.popoverAppendToBody = attrs.popoverAppendToBody || false;
                }
            }
        })