feat(tooltip): add arrow and close btn styles

Author: didimmova

projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-component.scss

@@ -10,6 +10,22 @@
 
         @extend %tooltip-display !optional;
 
+        @include m(top) {
+            @extend %arrow--top !optional;
+        }
+
+        @include m(bottom) {
+            @extend %arrow--bottom !optional;
+        }
+
+        @include m(left) {
+            @extend %arrow--left !optional;
+        }
+
+        @include m(right) {
+            @extend %arrow--right !optional;
+        }
+
         @include m(hidden) {
             @extend %tooltip--hidden !optional;
         }

projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss

@@ -75,23 +75,52 @@
     @include css-vars($theme);
     $variant: map.get($theme, '_meta', 'variant');
 
+    $transparent-border: rem(4px) solid transparent;
+    $color-border: rem(4px) solid var-get($theme, 'background');
+
     %tooltip-display {
         display: inline-flex;
-        justify-content: center;
-        flex-flow: column wrap;
+        align-items: flex-start;
+        text-align: start;
         background: var-get($theme, 'background');
         color: var-get($theme, 'text-color');
         border-radius: var-get($theme, 'border-radius');
         box-shadow: map.get($theme, 'shadow');
-        margin: 0 auto;
-        padding: 0 rem(8px);
+        padding: rem(4px) rem(8px);
+        gap: rem(8px);
         min-height: rem(24px);
+        min-width: rem(24px);
+        max-width: 200px;
 
-        @if $variant == 'indigo' {
-            padding: rem(4px) rem(8px);
+        igx-icon {
+            --component-size: 1;
         }
     }
 
+    %arrow--top {
+        border-left: $transparent-border;
+        border-right: $transparent-border;
+        border-top: $color-border;
+    }
+
+    %arrow--bottom {
+        border-left: $transparent-border;
+        border-right: $transparent-border;
+        border-bottom: $color-border;
+    }
+
+    %arrow--left {
+        border-top: $transparent-border;
+        border-bottom: $transparent-border;
+        border-left: $color-border;
+    }
+
+    %arrow--right {
+        border-top: $transparent-border;
+        border-bottom: $transparent-border;
+        border-right: $color-border;
+    }
+
     %tooltip--hidden {
         display: none;
     }
@@ -112,6 +141,7 @@
         }
     } @else {
         %tooltip-display {
+            line-height: rem(16px);
             font-size: rem(10px);
             font-weight: 600;
         }

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

@@ -202,10 +202,6 @@ export class IgxTooltipDirective extends IgxToggleDirective implements OnDestroy
         this._arrowEl = document.createElement('div');
         this._arrowEl.classList.add('igx-tooltip--arrow');
         this._arrowEl.style.position = 'absolute';
-        this._arrowEl.style.width = '8px';
-        this._arrowEl.style.height = '8px';
-        this._arrowEl.style.transform = 'rotate(45deg)';
-        this._arrowEl.style.background = 'inherit';
         this.element.appendChild(this._arrowEl);
     }