fix(tooltip): create arrow as span

Author: RivaIvanova

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

@@ -185,7 +185,7 @@ export class TooltipPositionStrategy extends AutoPositionStrategy {
             return;
         }
 
-        const arrow = tooltip.querySelector('div[data-arrow="true"]') as HTMLElement;
+        const arrow = tooltip.querySelector('[data-arrow="true"]') as HTMLElement;
 
         // If display is none -> tooltipTarget's hasArrow is false
         if (!arrow || arrow.style.display === 'none') {

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

@@ -12,7 +12,7 @@ import { Placement, PositionsMap } from './tooltip.common';
 const HIDDEN_TOOLTIP_CLASS = 'igx-tooltip--hidden';
 const TOOLTIP_CLASS = 'igx-tooltip';
 const HIDE_DELAY = 180;
-const TOOLTIP_ARROW_SELECTOR = 'div[data-arrow="true"]';
+const TOOLTIP_ARROW_SELECTOR = '[data-arrow="true"]';
 
 describe('IgxTooltip', () => {
     let fix: ComponentFixture<any>;

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

@@ -192,7 +192,7 @@ export class IgxTooltipDirective extends IgxToggleDirective implements OnDestroy
     }
 
     private _createArrow(): void {
-        this._arrowEl = document.createElement('div');
+        this._arrowEl = document.createElement('span');
         this._arrowEl.style.position = 'absolute';
         this._arrowEl.setAttribute('data-arrow', 'true');
         this.element.appendChild(this._arrowEl);