diff --git a/packages/mosaic-dev/popover/template.html b/packages/mosaic-dev/popover/template.html
index d8f318424..5c437e165 100644
--- a/packages/mosaic-dev/popover/template.html
+++ b/packages/mosaic-dev/popover/template.html
@@ -249,4 +249,4 @@
Configuration:
-
\ No newline at end of file
+
diff --git a/packages/mosaic/popover/popover.component.ts b/packages/mosaic/popover/popover.component.ts
index b21452f4d..53e87f312 100644
--- a/packages/mosaic/popover/popover.component.ts
+++ b/packages/mosaic/popover/popover.component.ts
@@ -267,8 +267,18 @@ export function getMcPopoverInvalidPositionError(position: string) {
}
const VIEWPORT_MARGIN: number = 8;
+
+/* Constant distance between popover container border
+* corner according to popover placement and middle of arrow
+* */
const POPOVER_ARROW_BORDER_DISTANCE: number = 20; // tslint:disable-line
+/* Constant value for min height and width of anchor element used for popover.
+* Set as POPOVER_ARROW_BORDER_DISTANCE multiplied by 2
+* plus 2px border for both sides of element. Used in check of position management.
+* */
+const ANCHOR_MIN_HEIGHT_WIDTH: number = 44; // tslint:disable-line
+
@Directive({
selector: '[mcPopover]',
exportAs: 'mcPopover',
@@ -582,6 +592,13 @@ export class McPopover implements OnInit, OnDestroy {
const styleProperty = updatedPlacement.split(/(?=[A-Z])/)[1].toLowerCase();
+ if (((styleProperty === 'top' || styleProperty === 'bottom') &&
+ elementHeight > ANCHOR_MIN_HEIGHT_WIDTH) ||
+ ((styleProperty === 'left' || styleProperty === 'right') &&
+ elementWidth > ANCHOR_MIN_HEIGHT_WIDTH)) {
+ return;
+ }
+
if (!this.overlayRef.overlayElement.style[styleProperty]) {
this.overlayRef.overlayElement.style[styleProperty] = '0px';
}
diff --git a/packages/mosaic/popover/popover.scss b/packages/mosaic/popover/popover.scss
index b7f4d7506..a06005cf7 100644
--- a/packages/mosaic/popover/popover.scss
+++ b/packages/mosaic/popover/popover.scss
@@ -7,7 +7,7 @@
$z-index-popover: 1060;
$popover-max-width: 240px;
$border-radius-base: 4px;
-$popover-arrow-width: 6px;
+$popover-arrow-width: 4px;
$popover-distance: $popover-arrow-width * 2;
$popover-arrow-distance: -($popover-arrow-width + 2px);
$border-size: 1px;
@@ -151,7 +151,7 @@ $mc-popover-large-width: 640px;
.mc-popover_placement-right-top .mc-popover__arrow {
left: $popover-arrow-distance;
- top: 20px;
+ top: 18px;
margin-top: -$popover-arrow-width;
}
@@ -169,7 +169,7 @@ $mc-popover-large-width: 640px;
.mc-popover_placement-left-top .mc-popover__arrow {
right: $popover-arrow-distance;
- top: 20px;
+ top: 18px;
margin-top: -$popover-arrow-width;
}