diff --git a/src/position/position.js b/src/position/position.js index 311859b940..2e78fc4270 100644 --- a/src/position/position.js +++ b/src/position/position.js @@ -476,10 +476,17 @@ angular.module('ui.bootstrap.position', []) return; } + var arrowCss = { + top: '', + bottom: '', + left: '', + right: '' + }; + placement = this.parsePlacement(placement); if (placement[1] === 'center') { // no adjustment necessary - just reset styles - angular.element(arrowElem).css({top: '', bottom: '', right: '', left: '', margin: ''}); + angular.element(arrowElem).css(arrowCss); return; } @@ -495,14 +502,6 @@ angular.module('ui.bootstrap.position', []) borderRadiusProp += '-radius'; var borderRadius = $window.getComputedStyle(isTooltip ? innerElem : elem)[borderRadiusProp]; - var arrowCss = { - top: 'auto', - bottom: 'auto', - left: 'auto', - right: 'auto', - margin: 0 - }; - switch (placement[0]) { case 'top': arrowCss.bottom = isTooltip ? '0' : '-' + borderWidth; diff --git a/src/tooltip/tooltip.css b/src/tooltip/tooltip.css new file mode 100644 index 0000000000..7741d6938f --- /dev/null +++ b/src/tooltip/tooltip.css @@ -0,0 +1,22 @@ +[uib-tooltip-popup].tooltip.top-left > .tooltip-arrow, +[uib-tooltip-popup].tooltip.top-right > .tooltip-arrow, +[uib-tooltip-popup].tooltip.bottom-left > .tooltip-arrow, +[uib-tooltip-popup].tooltip.bottom-right > .tooltip-arrow, +[uib-tooltip-popup].tooltip.left-top > .tooltip-arrow, +[uib-tooltip-popup].tooltip.left-bottom > .tooltip-arrow, +[uib-tooltip-popup].tooltip.right-top > .tooltip-arrow, +[uib-tooltip-popup].tooltip.right-bottom > .tooltip-arrow, +[uib-popover-popup].popover.top-left > .arrow, +[uib-popover-popup].popover.top-right > .arrow, +[uib-popover-popup].popover.bottom-left > .arrow, +[uib-popover-popup].popover.bottom-right > .arrow, +[uib-popover-popup].popover.left-top > .arrow, +[uib-popover-popup].popover.left-bottom > .arrow, +[uib-popover-popup].popover.right-top > .arrow, +[uib-popover-popup].popover.right-bottom > .arrow { + top: auto; + bottom: auto; + left: auto; + right: auto; + margin: 0; +} \ No newline at end of file diff --git a/src/tooltip/tooltip.js b/src/tooltip/tooltip.js index 7609d0eb72..24d1befcb3 100644 --- a/src/tooltip/tooltip.js +++ b/src/tooltip/tooltip.js @@ -154,6 +154,7 @@ angular.module('ui.bootstrap.tooltip', ['ui.bootstrap.position', 'ui.bootstrap.s var isOpenParse = angular.isDefined(attrs[prefix + 'IsOpen']) ? $parse(attrs[prefix + 'IsOpen']) : false; var contentParse = options.useContentExp ? $parse(attrs[ttType]) : false; var observers = []; + var lastPlacement; var positionTooltip = function() { // check if tooltip exists and is not empty @@ -168,29 +169,16 @@ angular.module('ui.bootstrap.tooltip', ['ui.bootstrap.position', 'ui.bootstrap.s var ttPosition = $position.positionElements(element, tooltip, ttScope.placement, appendToBody); tooltip.css({ top: ttPosition.top + 'px', left: ttPosition.left + 'px', visibility: 'visible' }); - // If the placement class is prefixed, still need - // to remove the TWBS standard class. - if (options.placementClassPrefix) { - tooltip.removeClass('top bottom left right'); - } + if (ttPosition.placement !== lastPlacement) { + tooltip.removeClass(lastPlacement.split('-')[0]); + tooltip.addClass(ttPosition.placement.split('-')[0]); + + tooltip.removeClass(options.placementClassPrefix + lastPlacement); + tooltip.addClass(options.placementClassPrefix + ttPosition.placement); - tooltip.removeClass( - options.placementClassPrefix + 'top ' + - options.placementClassPrefix + 'top-left ' + - options.placementClassPrefix + 'top-right ' + - options.placementClassPrefix + 'bottom ' + - options.placementClassPrefix + 'bottom-left ' + - options.placementClassPrefix + 'bottom-right ' + - options.placementClassPrefix + 'left ' + - options.placementClassPrefix + 'left-top ' + - options.placementClassPrefix + 'left-bottom ' + - options.placementClassPrefix + 'right ' + - options.placementClassPrefix + 'right-top ' + - options.placementClassPrefix + 'right-bottom'); - - var placement = ttPosition.placement.split('-'); - tooltip.addClass(placement[0] + ' ' + options.placementClassPrefix + ttPosition.placement); - $position.positionArrow(tooltip, ttPosition.placement); + $position.positionArrow(tooltip, ttPosition.placement); + lastPlacement = ttPosition.placement; + } positionTimeout = null; }, 0, false); @@ -365,6 +353,7 @@ angular.module('ui.bootstrap.tooltip', ['ui.bootstrap.position', 'ui.bootstrap.s ttScope.popupClass = attrs[prefix + 'Class']; ttScope.placement = angular.isDefined(attrs[prefix + 'Placement']) ? attrs[prefix + 'Placement'] : options.placement; + lastPlacement = ''; var delay = parseInt(attrs[prefix + 'PopupDelay'], 10); var closeDelay = parseInt(attrs[prefix + 'PopupCloseDelay'], 10); @@ -540,7 +529,7 @@ angular.module('ui.bootstrap.tooltip', ['ui.bootstrap.position', 'ui.bootstrap.s } appendToBody = angular.isDefined(appendToBodyVal) ? appendToBodyVal : appendToBody; - + // Make sure tooltip is destroyed and removed. scope.$on('$destroy', function onDestroyTooltip() { unregisterTriggers();