fix(module:tooltip): color of the tooltip arrow does not change (#8192)

* fix(module:tooltip): color of the tooltip arrow does not change * fix(module:tooltip): color of the tooltip arrow does not change * fix(module:tooltip): color of the tooltip arrow does not change
NG-ZORRO · Dec 4, 2023 · bc344ed · bc344ed
1 parent 4e2cb74
commit bc344ed
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 7 deletions.
diff --git a/components/tooltip/style/index.less b/components/tooltip/style/index.less
@@ -5,8 +5,7 @@
 
 @tooltip-arrow-shadow-width: 3px;
 
-@tooltip-arrow-rotate-width: sqrt(@tooltip-arrow-width * @tooltip-arrow-width * 2) +
-  @tooltip-arrow-shadow-width * 2;
+@tooltip-arrow-rotate-width: sqrt(@tooltip-arrow-width * @tooltip-arrow-width * 2) + @tooltip-arrow-shadow-width * 2;
 
 @tooltip-arrow-offset-vertical: 5px; // 8 - 3px
 @tooltip-arrow-offset-horizontal: 13px; // 16 - 3px
@@ -82,10 +81,9 @@
 
     &-content {
       // Use linear gradient to mix box shadow of tooltip inner
-      --antd-arrow-background-color: linear-gradient(
-        to right bottom,
-        fadeout(@tooltip-bg, 10%),
-        @tooltip-bg
+      --antd-arrow-background-color: var(
+        --color, // used when setting custom color, fallback is provide line below in case no color is set
+        linear-gradient(to right bottom, fadeout(@tooltip-bg, 10%), @tooltip-bg) // fallback
       );
 
       position: absolute;

diff --git a/components/tooltip/tooltip.ts b/components/tooltip/tooltip.ts
@@ -163,7 +163,8 @@ export class NzToolTipComponent extends NzTooltipBaseComponent {
     };
 
     this._contentStyleMap = {
-      backgroundColor: !!this.nzColor && !isColorPreset ? this.nzColor : null
+      backgroundColor: !!this.nzColor && !isColorPreset ? this.nzColor : null,
+      '--color': this.nzColor
     };
   }
 }