Merge pull request #152 from FriedRiceNoodles/fix/tooltip

fix(tooltip): fix a bug that make empty content shown when the trigge…
FriedRiceNoodles · Jun 18, 2024 · dfac4d2 · dfac4d2
2 parents 0c20185 + 4fedae7
commit dfac4d2
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 2 deletions.
diff --git a/.changeset/shiny-balloons-deny.md b/.changeset/shiny-balloons-deny.md
@@ -0,0 +1,6 @@
+---
+'@banana-ui/banana': patch
+'@banana-ui/react': patch
+---
+
+Fix a bug that make empty content shown when the trigger action is none.
diff --git a/packages/banana/src/tooltip/index.styles.ts b/packages/banana/src/tooltip/index.styles.ts
@@ -22,6 +22,10 @@ export default [
       z-index: 100;
     }
 
+    .tooltip__empty-content {
+      display: none;
+    }
+
     .tooltip__content-body {
       padding: var(--banana-tooltip-padding, ${unsafeCSS(Var.TooltipPadding)});
       background-color: var(--banana-tooltip-background-color, ${unsafeCSS(Var.TooltipBackgroundColor)});

diff --git a/packages/banana/src/tooltip/index.ts b/packages/banana/src/tooltip/index.ts
@@ -380,11 +380,13 @@ export default class BTooltip extends LitElement {
           @keydown=${this._onTriggerKeyDown}
         ></slot>
         <div
-          class="tooltip__content"
+          class=${classMap({
+            tooltip__content: true,
+            'tooltip__empty-content': (this.content.length || 0) === 0,
+          })}
           part="drop"
           @mouseenter=${this._onContentMouseEnter}
           @mouseleave=${this._onContentMouseLeave}
-          ?hidden=${(this.content?.length || 0) === 0}
         >
           <slot name="content">
             <div part="content" class="tooltip__content-body">${this.content}</div>