feat(positioning): position tooltip and popover automatically (#3019)

The preference always goes to the 'top', but if it doesn't fit, the popup will be positioned automatically
ng-bootstrap · Feb 13, 2019 · aeb39aa · aeb39aa
1 parent 7f670ed
commit aeb39aa
Show file tree

Hide file tree

Showing 6 changed files with 7 additions and 7 deletions.
diff --git a/src/popover/popover-config.spec.ts b/src/popover/popover-config.spec.ts
@@ -5,7 +5,7 @@ describe('ngb-popover-config', () => {
     const config = new NgbPopoverConfig();
 
     expect(config.autoClose).toBe(true);
-    expect(config.placement).toBe('top');
+    expect(config.placement).toBe('auto');
     expect(config.triggers).toBe('click');
     expect(config.container).toBeUndefined();
     expect(config.disablePopover).toBe(false);

diff --git a/src/popover/popover-config.ts b/src/popover/popover-config.ts
@@ -9,7 +9,7 @@ import {PlacementArray} from '../util/positioning';
 @Injectable({providedIn: 'root'})
 export class NgbPopoverConfig {
   autoClose: boolean | 'inside' | 'outside' = true;
-  placement: PlacementArray = 'top';
+  placement: PlacementArray = 'auto';
   triggers = 'click';
   container: string;
   disablePopover = false;

diff --git a/src/popover/popover.spec.ts b/src/popover/popover.spec.ts
@@ -108,7 +108,7 @@ describe('ngb-popover', () => {
       const windowEl = getWindow(fixture.nativeElement);
 
       expect(windowEl).toHaveCssClass('popover');
-      expect(windowEl).toHaveCssClass(`bs-popover-${defaultConfig.placement}`);
+      expect(windowEl).toHaveCssClass('bs-popover-top');
       expect(windowEl.textContent.trim()).toBe('TitleHello, World!');
       expect(windowEl.getAttribute('role')).toBe('tooltip');
       expect(windowEl.getAttribute('id')).toBe('ngb-popover-1');
@@ -133,7 +133,7 @@ describe('ngb-popover', () => {
       const windowEl = getWindow(fixture.nativeElement);
 
       expect(windowEl).toHaveCssClass('popover');
-      expect(windowEl).toHaveCssClass(`bs-popover-${defaultConfig.placement}`);
+      expect(windowEl).toHaveCssClass('bs-popover-top');
       expect(windowEl.textContent.trim()).toBe('TitleHello, John!');
       expect(windowEl.getAttribute('role')).toBe('tooltip');
       expect(windowEl.getAttribute('id')).toBe('ngb-popover-2');

diff --git a/src/tooltip/tooltip-config.spec.ts b/src/tooltip/tooltip-config.spec.ts
@@ -5,7 +5,7 @@ describe('ngb-tooltip-config', () => {
     const config = new NgbTooltipConfig();
 
     expect(config.autoClose).toBe(true);
-    expect(config.placement).toBe('top');
+    expect(config.placement).toBe('auto');
     expect(config.triggers).toBe('hover');
     expect(config.container).toBeUndefined();
     expect(config.disableTooltip).toBe(false);

diff --git a/src/tooltip/tooltip-config.ts b/src/tooltip/tooltip-config.ts
@@ -9,7 +9,7 @@ import {PlacementArray} from '../util/positioning';
 @Injectable({providedIn: 'root'})
 export class NgbTooltipConfig {
   autoClose: boolean | 'inside' | 'outside' = true;
-  placement: PlacementArray = 'top';
+  placement: PlacementArray = 'auto';
   triggers = 'hover';
   container: string;
   disableTooltip = false;

diff --git a/src/tooltip/tooltip.spec.ts b/src/tooltip/tooltip.spec.ts
@@ -66,7 +66,7 @@ describe('ngb-tooltip', () => {
       const windowEl = getWindow(fixture.nativeElement);
 
       expect(windowEl).toHaveCssClass('tooltip');
-      expect(windowEl).toHaveCssClass(`bs-tooltip-${defaultConfig.placement}`);
+      expect(windowEl).toHaveCssClass('bs-tooltip-top');
       expect(windowEl.textContent.trim()).toBe('Great tip!');
       expect(windowEl.getAttribute('role')).toBe('tooltip');
       expect(windowEl.getAttribute('id')).toBe('ngb-tooltip-0');