fix(tooltip): tooltips breach viewports

[SteffanLong]

Plunkr

This particular issue was fixed in Bootstrap v3.2.0. This also affects popovers.

Relevent issue: twbs/bootstrap#12328

[wesleycho]

This may be tricky to fix, but it's certainly one that is on the plate.

[levin81]

This was posted by some user in a different issue regarding this, it is a current workaround that will reposition the tooltip/popover. It looks a bit ugly without the fade animation, though.

angular
    .module('app.components')
    .directive("positionTooltip", positionTooltip);

function positionTooltip($timeout) {
    var directive = {
        restrict: 'A',
        link: positionTooltipPostLink
    };

    function positionTooltipPostLink(scope, element, attrs) {
        var el, arrow, offset;

        element.bind('mouseenter', function () {
            $timeout(function () {
                el = element.next();
                if (el[0] !== undefined) {
                    if (el[0].offsetLeft < 0) {
                        offset = el[0].offsetLeft;
                        el.css('left', 0);
                        arrow = el[0].querySelector('.tooltip-arrow');
                        arrow = angular.element(arrow);
                        arrow.css('margin-left', (offset + -5) + 'px');
                    }
                    if (el[0].offsetTop < 0) {
                        offset = el[0].offsetTop;
                        el.css('top', 0);
                        arrow = el[0].querySelector('.tooltip-arrow');
                        arrow = angular.element(arrow);
                        arrow.css('margin-top', (offset + -5) + 'px');
                    }
                }
            });
        });
    }

    return directive;
}

[ghost]

This approach won't work since 0.13.4
The position is since then always 0
See this plunker http://plnkr.co/edit/Dk7SKLUSzVwkKTeZvhkJ?p=preview
and change the bootstrap versions

[lukasz-karolewski]

angular-strap has it working very nicely - just merge, copy&paste or whatever

https://github.com/mgcrea/angular-strap/blob/master/src/tooltip/tooltip.js search for viewport

[icfantv]

Closing in favor of #4762.