fix(tooltip): add angular positions classes

src/framework/theme/components/cdk/overlay/overlay-position.spec.ts

@@ -117,4 +117,34 @@ describe('NbAdjustableConnectedPositionStrategy', () => {
       { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 15 },
     ]));
   });
+
+  it('should map left position to start', () => {
+    const withPositionsSpy = spyOn(strategy, 'withPositions').and.callThrough();
+
+    strategy.position(NbPosition.LEFT).adjustment(NbAdjustment.HORIZONTAL);
+
+    const overlayService: NbOverlayService = TestBed.get(NbOverlayService);
+    const overlayRef = overlayService.create({ positionStrategy: strategy });
+    overlayRef.attach(new NbComponentPortal(PortalComponent));
+
+    expect(withPositionsSpy).toHaveBeenCalledWith(jasmine.objectContaining([
+      { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -15 },
+      { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: 15 },
+    ]));
+  });
+
+  it('should map right position to end', () => {
+    const withPositionsSpy = spyOn(strategy, 'withPositions').and.callThrough();
+
+    strategy.position(NbPosition.RIGHT).adjustment(NbAdjustment.HORIZONTAL);
+
+    const overlayService: NbOverlayService = TestBed.get(NbOverlayService);
+    const overlayRef = overlayService.create({ positionStrategy: strategy });
+    overlayRef.attach(new NbComponentPortal(PortalComponent));
+
+    expect(withPositionsSpy).toHaveBeenCalledWith(jasmine.objectContaining([
+      { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: 15 },
+      { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -15 },
+    ]));
+  });
 });

src/framework/theme/components/cdk/overlay/overlay-position.ts

@@ -209,11 +209,23 @@ export class NbAdjustableConnectedPositionStrategy
   }
 
   protected reorderPreferredPositions(positions: NbPosition[]): NbPosition[] {
-    const startPositionIndex = positions.indexOf(this._position);
+    // Physical positions should be mapped to logical as adjustments use logical positions.
+    const startPositionIndex = positions.indexOf(this.mapToLogicalPosition(this._position));
     const firstPart = positions.slice(startPositionIndex);
     const secondPart = positions.slice(0, startPositionIndex);
     return firstPart.concat(secondPart);
   }
+
+  protected mapToLogicalPosition(position: NbPosition): NbPosition {
+    if (position === NbPosition.LEFT) {
+      return NbPosition.START;
+    }
+    if (position === NbPosition.RIGHT) {
+      return NbPosition.END;
+    }
+
+    return position;
+  }
 }
 
 export class NbGlobalPositionStrategy extends GlobalPositionStrategy {

src/framework/theme/components/tooltip/tooltip.component.scss

@@ -4,9 +4,11 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-:host {
-  $arrow-size: 6px;
+@import '../../styles/core/mixins';
+
+$arrow-size: 6px;
 
+:host {
   z-index: 10000;
 
   .content {
@@ -41,27 +43,117 @@
     border-left: $arrow-size solid transparent;
     border-right: $arrow-size solid transparent;
   }
+}
 
-  &.bottom .arrow {
-    top: -#{$arrow-size};
+:host(.bottom) {
+  .arrow {
+    top: -$arrow-size;
     left: calc(50% - #{$arrow-size});
   }
+}
 
-  &.left .arrow {
-    right: round(-$arrow-size - $arrow-size / 2.5);
+:host(.bottom-start) {
+  .arrow {
+    top: -$arrow-size;
+    @include nb-ltr(right, $arrow-size);
+    @include nb-rtl(left, $arrow-size);
+  }
+}
+
+:host(.bottom-end) {
+  .arrow {
+    top: -$arrow-size;
+    @include nb-ltr(left, $arrow-size);
+    @include nb-rtl(right, $arrow-size);
+  }
+}
+
+:host(.left),
+:host(.start) {
+  .arrow {
+    $inline-offset: round(-$arrow-size - $arrow-size / 2.5);
+    @include nb-ltr() {
+      right: $inline-offset;
+      transform: rotate(90deg);
+    };
+    @include nb-rtl() {
+      left: $inline-offset;
+      transform: rotate(270deg);
+    };
     top: calc(50% - #{$arrow-size / 2.5});
+  }
+}
+
+:host(.start-top) {
+  .arrow {
+    right: round(-$arrow-size - $arrow-size / 2.5);
+    bottom: $arrow-size;
+    transform: rotate(90deg);
+  }
+}
+
+:host(.start-bottom) {
+  .arrow {
+    right: round(-$arrow-size - $arrow-size / 2.5);
+    top: $arrow-size;
     transform: rotate(90deg);
   }
+}
 
-  &.top .arrow {
-    bottom: -#{$arrow-size};
+:host(.top) {
+  .arrow {
+    bottom: -$arrow-size;
     left: calc(50% - #{$arrow-size});
     transform: rotate(180deg);
   }
+}
 
-  &.right .arrow {
-    left: round(-$arrow-size - $arrow-size / 2.5);
+:host(.top-start) {
+  .arrow {
+    bottom: calc(-1 * #{$arrow-size} + 1px);
+    @include nb-ltr(right, $arrow-size);
+    @include nb-rtl(left, $arrow-size);
+    transform: rotate(180deg);
+  }
+}
+
+:host(.top-end) {
+  .arrow {
+    bottom: calc(-#{$arrow-size} + 1px);
+    @include nb-ltr(left, $arrow-size);
+    @include nb-rtl(right, $arrow-size);
+    transform: rotate(180deg);
+  }
+}
+
+:host(.right),
+:host(.end) {
+  .arrow {
+    $inline-offset: round(-$arrow-size - $arrow-size / 2.5);
+    @include nb-ltr() {
+      left: $inline-offset;
+      transform: rotate(270deg);
+    };
+    @include nb-rtl() {
+      right: $inline-offset;
+      transform: rotate(90deg);
+    };
     top: calc(50% - #{$arrow-size / 2.5});
+  }
+}
+
+:host(.end-top) {
+  .arrow {
+    left: calc(-#{$arrow-size} - #{$arrow-size} / 2.5);
+    bottom: $arrow-size;
+    transform: rotate(270deg);
+  }
+}
+
+:host(.end-bottom) {
+  .arrow {
+    left: calc(-#{$arrow-size} - #{$arrow-size} / 2.5);
+    top: $arrow-size;
     transform: rotate(270deg);
   }
 }

src/playground/with-layout/tooltip/tooltip-placements.component.html

@@ -1,4 +1,6 @@
 <button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbButton>Top</button>
 <button nbTooltip="This is a tooltip" nbTooltipPlacement="right" nbButton>Right</button>
+<button nbTooltip="This is a tooltip" nbTooltipPlacement="end" nbButton>End</button>
 <button nbTooltip="This is a tooltip" nbTooltipPlacement="bottom" nbButton>Bottom</button>
 <button nbTooltip="This is a tooltip" nbTooltipPlacement="left" nbButton>Left</button>
+<button nbTooltip="This is a tooltip" nbTooltipPlacement="start" nbButton>Start</button>