fix(tooltip): use default pos settings and expose tooltip pos strategy

Author: RivaIvanova

projects/igniteui-angular/src/lib/directives/tooltip/tooltip.common.ts

@@ -38,7 +38,7 @@ export class TooltipPositionStrategy extends AutoPositionStrategy implements ITo
             settings = Object.assign({}, positionSettings, settings);
         }
 
-        super(settings);
+        super(settings || positionSettings);
     }
 
     /**

projects/igniteui-angular/src/lib/services/overlay/position/index.ts

@@ -1,6 +1,7 @@
 
 // Export position strategies
 export * from './IPositionStrategy';
+export * from './ITooltipPositionStrategy';
 export * from './global-position-strategy';
 export * from './container-position-strategy';
 export * from './connected-positioning-strategy';

src/app/tooltip/tooltip.sample.html

@@ -3,14 +3,15 @@ <h5 style="margin-top: 0px;">Tooltip Placement</h5>
     <igx-avatar src="assets/images/avatar/10.jpg" size="medium"
         #target="tooltipTarget"
         [igxTooltipTarget]="positionTooltip"
+        [hasArrow]="true"
     >
     </igx-avatar>
 
     <div #positionTooltip="tooltip" igxTooltip>
-        Tooltip placement is {{ target.placement }}
+        Tooltip placement is {{ target.positionSettings?.placement }}
     </div>
 
-    <igx-select [(ngModel)]="target.placement">
+    <igx-select (selectionChanging)="setPlacement($event)" [value]="target.positionSettings?.placement">
         @for (placement of placementPositions; track placement) {
             <igx-select-item [value]="placement">
                 {{placement}}
@@ -27,8 +28,6 @@ <h4 class="sample-title">Simple tooltip</h4>
                     [closeButtonTemplate]="customClose"
                     [overlaySettings]="settings"
                     src="assets/images/avatar/10.jpg" size="medium"
-                    (onTooltipShow)="showing()"
-                    (onTooltipHide)="hiding()"
                     aria-describedby="myid">
         </igx-avatar>
 

src/app/tooltip/tooltip.sample.ts

@@ -17,7 +17,10 @@ import {
     IgxSliderComponent,
     IgxSwitchComponent,
     IgxTooltipDirective,
-    IgxTooltipTargetDirective, OverlaySettings
+    IgxTooltipTargetDirective,
+    ISelectionEventArgs,
+    OverlaySettings,
+    Placement,
 } from 'igniteui-angular';
 
 @Component({
@@ -59,6 +62,10 @@ export class TooltipSampleComponent implements OnInit {
     }
 
     public ngOnInit() {
+        this.tooltipTarget.positionSettings = {
+            placement: Placement.Bottom,
+        };
+
         this.data = [
             {
                 Brand: 'Samsung',
@@ -127,9 +134,11 @@ export class TooltipSampleComponent implements OnInit {
         this.tooltipTarget.hideTooltip();
     }
 
-    public showing() {
-    }
+    public setPlacement(args: ISelectionEventArgs) {
+        const placement: Placement = args.newSelection.value;
 
-    public hiding() {
+        this.tooltipTarget.positionSettings = {
+            placement: placement,
+        };
     }
 }