diff --git a/src/tooltip/tooltip.component.scss b/src/tooltip/tooltip.component.scss index 5a8de8b01..c81d6c265 100644 --- 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 index 070fe2d66..06e6f73d9 100644 --- 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 index bb8d257f3..7ebd9dccc 100644 --- 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 {