fix: tooltip css priority

alauda · Jun 4, 2024 · b360973 · b360973
1 parent 7a39552
commit b360973
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 16 deletions.
diff --git a/src/tooltip/tooltip.component.scss b/src/tooltip/tooltip.component.scss
@@ -4,22 +4,20 @@
 
 $block: 'aui-tooltip';
 
-.#{$block} {
-  &:not(.#{$block}--empty) {
-    position: relative;
-    border-radius: use-var(border-radius-m);
-    background-color: use-rgb(popper-bg);
-    @include popper-shadow;
-  }
+@mixin text-styles {
+  max-width: 400px;
+  word-wrap: break-word; // do NOT add 'word-break: break-all;', design requirement
+  @include text-set(s);
+}
 
-  &:not(.#{$block}--empty):not(.#{$block}--plain) {
-    max-width: 400px;
-    word-wrap: break-word; // do NOT add 'word-break: break-all;', design requirement
-    @include text-set(s);
-  }
+.#{$block} {
+  border-radius: use-var(border-radius-m);
+  background-color: use-rgb(popper-bg);
+  @include popper-shadow;
 
   &--default {
     padding: use-var(spacing-m) use-var(spacing-xl);
+    @include text-styles;
     @include theme-light {
       color: use-rgb(n-10);
       background-color: use-rgb(n-1);
@@ -33,26 +31,31 @@ $block: 'aui-tooltip';
   &--primary {
     padding: use-var(spacing-xl);
     color: use-rgb(primary);
+    @include text-styles;
   }
 
   &--success {
     padding: use-var(spacing-xl);
     color: use-rgb(green);
+    @include text-styles;
   }
 
   &--warning {
     padding: use-var(spacing-xl);
     color: use-rgb(yellow);
+    @include text-styles;
   }
 
   &--error {
     padding: use-var(spacing-xl);
     color: use-rgb(red);
+    @include text-styles;
   }
 
   &--info {
     padding: use-var(spacing-xl);
     color: use-rgb(n-1);
+    @include text-styles;
   }
 
   &--align {

diff --git a/src/tooltip/tooltip.component.ts b/src/tooltip/tooltip.component.ts
@@ -104,11 +104,11 @@ export class TooltipComponent implements OnDestroy {
       map(([inputPosition, inputType, inputClass]) => {
         const b = this.bem.block();
         const [direction, align] = inputPosition.split(' ');
-        return `${b} ${b}--direction_${direction} ${b}--align_${
+        return `${
+          inputType === TooltipType.Empty ? '' : b
+        } ${b}--${inputType} ${b}--direction_${direction} ${b}--align_${
           align ?? 'center'
-        } ${b}--${inputType} ${inputClass} ${this.bem.element(
-          'transform-origin',
-        )} `;
+        } ${this.bem.element('transform-origin')} ${inputClass}`;
       }),
       publishRef(),
     );

diff --git a/src/tooltip/tooltip.types.ts b/src/tooltip/tooltip.types.ts
@@ -6,6 +6,7 @@ export enum TooltipType {
   Error = 'error',
   Info = 'info',
   Plain = 'plain',
+  Empty = 'empty',
 }
 
 export enum TooltipTrigger {