From 34a8634cd1e577c4742d37dfc9fa71f8e25293db Mon Sep 17 00:00:00 2001
From: Wynand Cronje <wynand.cronje@hm.com>
Date: Wed, 26 Jan 2022 11:40:11 +0100
Subject: [PATCH] feat(core): Customize Tooltips (#1258)

---
 projects/core/abstract/abstract-hint-options.ts  |  6 ++++--
 projects/core/abstract/abstract-hint.ts          |  4 ++++
 .../hints-host/hints-host.template.html          |  1 +
 .../primitive-textfield.template.html            |  1 +
 .../core/components/tooltip/tooltip.component.ts |  4 ++++
 .../components/tooltip/tooltip.template.html     |  1 +
 .../hint-controller/hint-controller.directive.ts |  4 ++++
 .../src/modules/components/abstract/control.ts   |  2 ++
 .../hint-controller-documentation.template.html  | 16 ++++++++++++++++
 .../inherited-documentation.template.html        | 15 +++++++++++++++
 .../components/tooltip/examples/2/index.html     |  2 +-
 .../components/tooltip/tooltip.component.ts      |  2 ++
 .../components/tooltip/tooltip.template.html     | 15 +++++++++++++++
 .../hint-controller/hint-controller.component.ts |  2 ++
 .../hint-controller.template.html                | 15 +++++++++++++++
 .../modules/directives/hint/hint.component.ts    |  1 +
 .../modules/directives/hint/hint.template.html   |  1 +
 projects/demo/src/styles.less                    |  4 ++++
 18 files changed, 93 insertions(+), 3 deletions(-)

diff --git a/projects/core/abstract/abstract-hint-options.ts b/projects/core/abstract/abstract-hint-options.ts
index 9fb4a89e4ec6..b325eb9504c6 100644
--- a/projects/core/abstract/abstract-hint-options.ts
+++ b/projects/core/abstract/abstract-hint-options.ts
@@ -1,12 +1,14 @@
-import {TuiDirection, TuiHintModeT} from '@taiga-ui/core/types';
+import { TuiDirection, TuiHintModeT } from '@taiga-ui/core/types';
 
 export interface TuiAbstractHintOptions {
     readonly mode: TuiHintModeT | null;
     readonly direction: TuiDirection;
+    readonly cssClass: string | null;
 }
 
 /** Default values for abstract hint options */
 export const TUI_ABSTRACT_HINT_DEFAULT_OPTIONS: TuiAbstractHintOptions = {
     mode: null,
-    direction: 'bottom-left',
+    direction: 'bottom-left', 
+    cssClass: null
 };
diff --git a/projects/core/abstract/abstract-hint.ts b/projects/core/abstract/abstract-hint.ts
index 410a637ecd07..bb960e0920e0 100644
--- a/projects/core/abstract/abstract-hint.ts
+++ b/projects/core/abstract/abstract-hint.ts
@@ -14,6 +14,10 @@ export abstract class AbstractTuiHint implements OnDestroy {
     @Input('tuiHintDirection')
     @tuiDefaultProp()
     direction: TuiAbstractHintOptions['direction'] = this.options.direction;
+    
+    @Input('tuiHintCssClass')
+    @tuiDefaultProp()
+    cssClass: TuiAbstractHintOptions['cssClass'] = this.options.cssClass;
 
     content: PolymorpheusContent = '';
 
diff --git a/projects/core/components/hints-host/hints-host.template.html b/projects/core/components/hints-host/hints-host.template.html
index 318f01ba756e..431c89abfa60 100644
--- a/projects/core/components/hints-host/hints-host.template.html
+++ b/projects/core/components/hints-host/hints-host.template.html
@@ -3,6 +3,7 @@
     role="tooltip"
     [@tuiFadeIn]="animation"
     [attr.id]="hint.id"
+    [class]="'tui-hint-box ' + hint.cssClass"
     [hint]="hint"
     [tuiActiveZoneParent]="hint.activeZone"
     (tuiHoveredChange)="onHovered($event, hint)"
diff --git a/projects/core/components/primitive-textfield/primitive-textfield.template.html b/projects/core/components/primitive-textfield/primitive-textfield.template.html
index 439a871ba64a..a5e7a902ddb7 100644
--- a/projects/core/components/primitive-textfield/primitive-textfield.template.html
+++ b/projects/core/components/primitive-textfield/primitive-textfield.template.html
@@ -108,6 +108,7 @@
             [mode]="hintController.mode"
             [showDelay]="hintController.showDelay"
             [hideDelay]="hintController.hideDelay"
+            [cssClass]="hintController.cssClass"
         ></tui-tooltip>
         <div
             *ngIf="iconAlignRight"
diff --git a/projects/core/components/tooltip/tooltip.component.ts b/projects/core/components/tooltip/tooltip.component.ts
index ab874a4b4d36..ef9e34f69198 100644
--- a/projects/core/components/tooltip/tooltip.component.ts
+++ b/projects/core/components/tooltip/tooltip.component.ts
@@ -49,6 +49,10 @@ export class TuiTooltipComponent {
     @tuiDefaultProp()
     describeId = '';
 
+    @Input()
+    @tuiDefaultProp()
+    cssClass: TuiHintOptions['cssClass'] = this.options.cssClass;
+
     constructor(
         @Inject(TuiDestroyService) destroy$: Observable<unknown>,
         @Inject(TUI_MODE) mode$: Observable<TuiBrightness | null>,
diff --git a/projects/core/components/tooltip/tooltip.template.html b/projects/core/components/tooltip/tooltip.template.html
index 43ef57ff4f90..3ee60b9e2a76 100644
--- a/projects/core/components/tooltip/tooltip.template.html
+++ b/projects/core/components/tooltip/tooltip.template.html
@@ -5,6 +5,7 @@
     [content]="icon"
     [tuiHintId]="describeId"
     [tuiHint]="content"
+    [tuiHintCssClass]="cssClass"
     [tuiHintDirection]="direction"
     [tuiHintShowDelay]="showDelay"
     [tuiHintHideDelay]="hideDelay"
diff --git a/projects/core/directives/hint-controller/hint-controller.directive.ts b/projects/core/directives/hint-controller/hint-controller.directive.ts
index 050d1a113d1f..47b2821b1ee8 100644
--- a/projects/core/directives/hint-controller/hint-controller.directive.ts
+++ b/projects/core/directives/hint-controller/hint-controller.directive.ts
@@ -37,6 +37,10 @@ export class TuiHintControllerDirective extends TuiController {
     @tuiDefaultProp()
     hideDelay: TuiHintOptions['tuiHintHideDelay'] = this.options.tuiHintHideDelay;
 
+    @Input('tuiHintCssClass')
+    @tuiDefaultProp()
+    cssClass: TuiHintOptions['cssClass'] = this.options.cssClass;
+    
     constructor(@Inject(TUI_HINT_OPTIONS) private readonly options: TuiHintOptions) {
         super();
     }
diff --git a/projects/demo/src/modules/components/abstract/control.ts b/projects/demo/src/modules/components/abstract/control.ts
index 258d40b4c516..90409541390f 100644
--- a/projects/demo/src/modules/components/abstract/control.ts
+++ b/projects/demo/src/modules/components/abstract/control.ts
@@ -108,6 +108,8 @@ export abstract class AbstractExampleTuiControl
 
     hintMode: TuiHintModeT | null = null;
 
+    cssClass : string | null = null;
+
     readonly dropdownAlignVariants: ReadonlyArray<TuiHorizontalDirection> = [
         'left',
         'right',
diff --git a/projects/demo/src/modules/components/abstract/hint-controller-documentation/hint-controller-documentation.template.html b/projects/demo/src/modules/components/abstract/hint-controller-documentation/hint-controller-documentation.template.html
index 0bbc4addabdb..e4ed53f0c354 100644
--- a/projects/demo/src/modules/components/abstract/hint-controller-documentation/hint-controller-documentation.template.html
+++ b/projects/demo/src/modules/components/abstract/hint-controller-documentation/hint-controller-documentation.template.html
@@ -41,4 +41,20 @@ <h6 i18n class="tui-text_h6">
     >
         Hint mode
     </ng-template>
+    <ng-template
+        i18n
+        documentationPropertyName="tuiHintCssClass"
+        documentationPropertyMode="input"
+        documentationPropertyType="string"
+        [(documentationPropertyValue)]="documentedComponent.cssClass"
+    >
+        Adds custom css classes (space separated) to global element <code>tui-hint-box</code>.
+        This enables css overrides in global style sheet.
+        example: <code>tui-tooltip-custom</code>
+        In global stylesheet 
+        <pre><code>.tui-hint-box.tui-tooltip-custom {{'{'}}
+    background-color: var(--tui-support-06);
+{{'}'}}</code></pre>
+    </ng-template>
+    
 </tui-doc-documentation>
diff --git a/projects/demo/src/modules/components/abstract/inherited-documentation/inherited-documentation.template.html b/projects/demo/src/modules/components/abstract/inherited-documentation/inherited-documentation.template.html
index c9ea47414ec3..47530600e57e 100644
--- a/projects/demo/src/modules/components/abstract/inherited-documentation/inherited-documentation.template.html
+++ b/projects/demo/src/modules/components/abstract/inherited-documentation/inherited-documentation.template.html
@@ -137,5 +137,20 @@ <h6 class="tui-text_h6">
         >
             Hint mode
         </ng-template>
+        <ng-template
+            i18n
+            documentationPropertyName="tuiHintCssClass"
+            documentationPropertyMode="input"
+            documentationPropertyType="string"
+            [(documentationPropertyValue)]="documentedComponent.cssClass"
+        >
+            Adds custom css classes (space separated) to global element <code>tui-hint-box</code>.
+            This enables css overrides in global style sheet.
+            example: <code>tui-tooltip-custom</code>
+            In global stylesheet 
+            <pre><code>.tui-hint-box.tui-tooltip-custom {{'{'}}
+    background-color: var(--tui-support-06);
+{{'}'}}</code></pre>
+        </ng-template>
     </tui-doc-documentation>
 </ng-container>
diff --git a/projects/demo/src/modules/components/tooltip/examples/2/index.html b/projects/demo/src/modules/components/tooltip/examples/2/index.html
index c956e8a96a24..3e971131edf6 100644
--- a/projects/demo/src/modules/components/tooltip/examples/2/index.html
+++ b/projects/demo/src/modules/components/tooltip/examples/2/index.html
@@ -1,6 +1,6 @@
 <p>
     Custom host can be set with
-    <a tuiLink tuiMode="onDark" [routerLink]="['/tui-hint']">
+    <a tuiLink tuiMode="onDark" [routerLink]="['/directives/hint']">
         <code>tuiHint</code>
     </a>
     directive
diff --git a/projects/demo/src/modules/components/tooltip/tooltip.component.ts b/projects/demo/src/modules/components/tooltip/tooltip.component.ts
index 110e1cb54f7e..ee8cca130dd2 100644
--- a/projects/demo/src/modules/components/tooltip/tooltip.component.ts
+++ b/projects/demo/src/modules/components/tooltip/tooltip.component.ts
@@ -60,4 +60,6 @@ export class ExampleTuiTooltipComponent {
     showDelay = 500;
 
     hideDelay = 200;
+    
+    cssClass = '';
 }
diff --git a/projects/demo/src/modules/components/tooltip/tooltip.template.html b/projects/demo/src/modules/components/tooltip/tooltip.template.html
index 7c264a815fc4..4b187f5b5039 100644
--- a/projects/demo/src/modules/components/tooltip/tooltip.template.html
+++ b/projects/demo/src/modules/components/tooltip/tooltip.template.html
@@ -45,6 +45,7 @@
                 [direction]="direction"
                 [showDelay]="showDelay"
                 [hideDelay]="hideDelay"
+                [cssClass]="cssClass"
             ></tui-tooltip>
             <input placeholder="id: qwerty" tuiDescribedBy="qwerty" />
         </tui-doc-demo>
@@ -108,6 +109,20 @@
             >
                 Hide Delay
             </ng-template>
+            <ng-template
+                documentationPropertyName="cssClass"
+                documentationPropertyMode="input"
+                documentationPropertyType="string"
+                [(documentationPropertyValue)]="cssClass"
+            >
+                Adds custom css classes (space separated) to global element <code>tui-hint-box</code>.
+                This enables css overrides in global style sheet.
+                example: <code>tui-tooltip-custom</code>
+                In global stylesheet 
+                <pre><code>.tui-hint-box.tui-tooltip-custom {{'{'}}
+    background-color: var(--tui-support-06);
+{{'}'}}</code></pre>
+            </ng-template>
         </tui-doc-documentation>
     </ng-template>
 
diff --git a/projects/demo/src/modules/directives/hint-controller/hint-controller.component.ts b/projects/demo/src/modules/directives/hint-controller/hint-controller.component.ts
index 9211fb0f6434..d86e1a64bff2 100644
--- a/projects/demo/src/modules/directives/hint-controller/hint-controller.component.ts
+++ b/projects/demo/src/modules/directives/hint-controller/hint-controller.component.ts
@@ -43,4 +43,6 @@ export class ExampleTuiHintControllerComponent {
     tuiHintShowDelay = 500;
 
     tuiHintHideDelay = 200;
+
+    tuiHintCssClass : string | null = null;
 }
diff --git a/projects/demo/src/modules/directives/hint-controller/hint-controller.template.html b/projects/demo/src/modules/directives/hint-controller/hint-controller.template.html
index afcce6202c00..0b17cd5205a7 100644
--- a/projects/demo/src/modules/directives/hint-controller/hint-controller.template.html
+++ b/projects/demo/src/modules/directives/hint-controller/hint-controller.template.html
@@ -37,6 +37,7 @@
                 [tuiHintMode]="tuiHintMode"
                 [tuiHintShowDelay]="tuiHintShowDelay"
                 [tuiHintHideDelay]="tuiHintHideDelay"
+                [tuiHintCssClass]="tuiHintCssClass"
             >
                 <tui-primitive-textfield [(value)]="tuiHintContent">
                     Content
@@ -88,6 +89,20 @@
             >
                 Hint controller hide delay
             </ng-template>
+            <ng-template
+                documentationPropertyName="tuiHintCssClass"
+                documentationPropertyMode="input"
+                documentationPropertyType="string"
+                [(documentationPropertyValue)]="tuiHintCssClass"
+            >
+                Adds custom css classes (space separated) to global element <code>tui-hint-box</code>.
+                This enables css overrides in global style sheet.
+                example: <code>tui-tooltip-custom</code>
+                In global stylesheet 
+                <pre><code>.tui-hint-box.tui-tooltip-custom {{'{'}}
+    background-color: var(--tui-support-06);
+{{'}'}}</code></pre>
+            </ng-template>
         </tui-doc-documentation>
     </ng-template>
 
diff --git a/projects/demo/src/modules/directives/hint/hint.component.ts b/projects/demo/src/modules/directives/hint/hint.component.ts
index e0243544c040..773e4f980d36 100644
--- a/projects/demo/src/modules/directives/hint/hint.component.ts
+++ b/projects/demo/src/modules/directives/hint/hint.component.ts
@@ -33,4 +33,5 @@ export class ExampleTuiHintComponent extends AbstractExampleTuiHint {
     id = '';
     showDelay = 500;
     hideDelay = 200;
+    cssClass : string | null = null;
 }
diff --git a/projects/demo/src/modules/directives/hint/hint.template.html b/projects/demo/src/modules/directives/hint/hint.template.html
index aecd461866c2..5f7777bcb454 100644
--- a/projects/demo/src/modules/directives/hint/hint.template.html
+++ b/projects/demo/src/modules/directives/hint/hint.template.html
@@ -21,6 +21,7 @@
                 [tuiHintDirection]="direction"
                 [tuiHintShowDelay]="showDelay"
                 [tuiHintHideDelay]="hideDelay"
+                [tuiHintCssClass]="cssClass"
             >
                 Hover it!
             </span>
diff --git a/projects/demo/src/styles.less b/projects/demo/src/styles.less
index 13ecf27822dd..dc176ce74cca 100644
--- a/projects/demo/src/styles.less
+++ b/projects/demo/src/styles.less
@@ -103,3 +103,7 @@ markdown {
         }
     }
 }
+
+.tui-hint-box.tui-tooltip-custom {
+    background-color: var(--tui-support-06);
+}