fix(tooltip): placement to bottom, no arrow by default, arrow multi targets

Author: RivaIvanova

projects/igniteui-angular/src/lib/directives/tooltip/tooltip-target.directive.ts

@@ -85,7 +85,7 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
 
 
     /**
-     * Where to place the tooltip relative to the target element. Default value is `top`.
+     * Where to place the tooltip relative to the target element. Default value is `bottom`.
      * ```html
      * <igx-icon [igxTooltipTarget]="tooltipRef" placement="bottom-start">info</igx-icon>
      * <span #tooltipRef="tooltip" igxTooltip>Hello there, I am a tooltip!</span>
@@ -124,29 +124,29 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
      *
      * ```typescript
      * // get
-     * let isArrowDisabled = this.tooltip.disableArrow;
+     * let isArrowDisabled = this.tooltip.hasArrow;
      * ```
      *
      * ```typescript
      * // set
-     * this.tooltip.disableArrow = false;
+     * this.tooltip.hasArrow = false;
      * ```
      *
      * ```html
      * <!--set-->
-     * <igx-icon igxTooltipTarget [disableArrow]="true" [tooltip]="'Infragistics Inc. HQ'">info</igx-icon>
+     * <igx-icon igxTooltipTarget [hasArrow]="true" [tooltip]="'Infragistics Inc. HQ'">info</igx-icon>
      * ```
      */
     @Input()
-    public set disableArrow(value: boolean) {
+    public set hasArrow(value: boolean) {
         if (this.target) {
-            this.target.arrow.style.display = value ? 'none' : '';
+            this.target.arrow.style.display = value ? '' : 'none';
         }
-        this._disableArrow = value;
+        this._hasArrow = value;
     }
 
-    public get disableArrow(): boolean {
-        return this._disableArrow;
+    public get hasArrow(): boolean {
+        return this._hasArrow;
     }
 
     /**
@@ -327,9 +327,9 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
     private _destroy$ = new Subject<void>();
     private _autoHideDelay = 180;
     private _isForceClosed = false;
-    private _disableArrow = false;
+    private _hasArrow = false;
     private _offset = 6;
-    private _placement: TooltipPlacement = TooltipPlacement.top;
+    private _placement: TooltipPlacement = TooltipPlacement.bottom;
     private _closeButtonRef?: ComponentRef<IgxTooltipCloseButtonComponent>;
     private _closeTemplate: TemplateRef<any>;
     private _sticky = false;
@@ -419,8 +419,8 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
      * @hidden
      */
     public ngOnChanges(changes: SimpleChanges): void {
-        if (changes['disableArrow']) {
-            this.target.arrow.style.display = changes['disableArrow'].currentValue ? 'none' : '';
+        if (changes['hasArrow']) {
+            this.target.arrow.style.display = changes['hasArrow'].currentValue ? '' : 'none';
         }
     }
 
@@ -570,9 +570,11 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
      */
     private _checkTooltipForMultipleTargets(): void {
         if (!this.target.tooltipTarget) {
+            this.hasArrow = this._hasArrow;
             this.target.tooltipTarget = this;
         }
         if (this.target.tooltipTarget !== this) {
+            this.hasArrow = this._hasArrow;
             if (this.target.tooltipTarget.sticky) {
                 this.target.tooltipTarget._removeCloseButtonFromTooltip();
             }

projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.spec.ts

@@ -88,38 +88,38 @@ describe('IgxTooltip', () => {
             verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, false);
         }));
 
-        it('should render a default arrow', fakeAsync(() => {
-            expect(tooltipTarget.disableArrow).toBeFalse();
+        it('should not render a default arrow', fakeAsync(() => {
+            expect(tooltipTarget.hasArrow).toBeFalse();
 
             hoverElement(button);
             flush();
 
             verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true);
 
-            const arrow = tooltipNativeElement.querySelector('.igx-tooltip--top');
+            const arrow = tooltipNativeElement.querySelector('.igx-tooltip--bottom');
             expect(arrow).not.toBeNull();
+            expect(arrow.style.display).toEqual("none");
         }));
 
-        it('should show/hide the arrow via the `disableArrow` property', fakeAsync(() => {
-            expect(tooltipTarget.disableArrow).toBeFalse();
-            expect(tooltipNativeElement.querySelector('.igx-tooltip--top')).toBeNull();
+        it('should show/hide the arrow via the `hasArrow` property', fakeAsync(() => {
+            expect(tooltipTarget.hasArrow).toBeFalse();
+            expect(tooltipNativeElement.querySelector('.igx-tooltip--bottom')).toBeNull();
 
-            tooltipTarget.disableArrow = true;
+            tooltipTarget.hasArrow = true;
             fix.detectChanges();
 
             hoverElement(button);
             flush();
 
             verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true);
 
-            expect(tooltipTarget.disableArrow).toBeTrue();
-            const arrow = tooltipNativeElement.querySelector('.igx-tooltip--top');
-            expect(arrow.style.display).toEqual("none");
+            expect(tooltipTarget.hasArrow).toBeTrue();
+            const arrow = tooltipNativeElement.querySelector('.igx-tooltip--bottom');
+            expect(arrow.style.display).toEqual("");
 
-            tooltipTarget.disableArrow = false;
+            tooltipTarget.hasArrow = false;
             fix.detectChanges();
-            expect(arrow.style.display).toEqual("");
-            expect(arrow.style.left).toEqual("75px");
+            expect(arrow.style.display).toEqual("none");
         }));
 
         it('show target tooltip when hovering its target and ignore [tooltip] input', fakeAsync(() => {
@@ -700,14 +700,14 @@ describe('IgxTooltip', () => {
         }));
 
         it('should correctly manage arrow state between different targets', fakeAsync(() => {
-            targetOne.disableArrow = true;
+            targetOne.hasArrow = true;
             fix.detectChanges();
 
             hoverElement(buttonOne);
             flush();
 
             verifyTooltipVisibility(tooltipNativeElement, targetOne, true);
-            expect(tooltipNativeElement.querySelector('.igx-tooltip--top').style.display).toEqual('none');
+            expect(tooltipNativeElement.querySelector('.igx-tooltip--bottom').style.display).toEqual('');
 
             unhoverElement(buttonOne);
             flush();
@@ -716,7 +716,7 @@ describe('IgxTooltip', () => {
             flush();
 
             verifyTooltipVisibility(tooltipNativeElement, targetTwo, true);
-            expect(tooltipNativeElement.querySelector('.igx-tooltip--top').style.display).toEqual('');
+            expect(tooltipNativeElement.querySelector('.igx-tooltip--bottom').style.display).toEqual('none');
         }));
     });
 
@@ -938,7 +938,7 @@ export const verifyTooltipPosition = (
     tooltipNativeElement: HTMLElement,
     actualTarget: { nativeElement: HTMLElement },
     shouldAlign:boolean = true,
-    placement: TooltipPlacement = 'top',
+    placement: TooltipPlacement = 'bottom',
     offset: number = 6
 ) => {
     const tooltip = tooltipNativeElement.getBoundingClientRect();