fixes #391

docs/resources/changelog.md

@@ -20,6 +20,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Fixed a bug in `sl-color-picker` that caused erratic slider behaviors [#388](https://github.com/shoelace-style/shoelace/issues/388) [#389](https://github.com/shoelace-style/shoelace/issues/389)
 - Fixed a bug where `sl-details` wouldn't always render the correct height when open initially [#357](https://github.com/shoelace-style/shoelace/issues/357)
 - Fixed a bug in `sl-tooltip` where events weren't properly cleaned up on disconnect
+- Fixed a bug in `sl-tooltip` where they wouldn't display after toggling `disabled` off and on again [#391](https://github.com/shoelace-style/shoelace/issues/391)
 - Renamed `components.json` to `metadata.json`
 - Updated to the prerelease versions of LitElement and lit-html
 - Updated to Bootstrap Icons 1.4.1

src/components/tooltip/tooltip.ts

@@ -114,6 +114,7 @@ export default class SlTooltip extends LitElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.popover.destroy();
+
     this.removeEventListener('blur', this.handleBlur, true);
     this.removeEventListener('focus', this.handleFocus, true);
     this.removeEventListener('click', this.handleClick);
@@ -125,7 +126,7 @@ export default class SlTooltip extends LitElement {
   /** Shows the tooltip. */
   show() {
     // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
-    if (this.isVisible) {
+    if (this.isVisible || this.disabled) {
       return;
     }
 
@@ -215,13 +216,19 @@ export default class SlTooltip extends LitElement {
   }
 
   @watch('placement')
-  @watch('disabled')
   @watch('distance')
   @watch('skidding')
   handleOptionsChange() {
     this.syncOptions();
   }
 
+  @watch('disabled')
+  handleDisabledChange() {
+    if (this.disabled && this.open) {
+      this.hide();
+    }
+  }
+
   handleSlotChange() {
     const oldTarget = this.target;
     const newTarget = this.getTarget();
@@ -256,24 +263,20 @@ export default class SlTooltip extends LitElement {
     return html`
       <slot @slotchange=${this.handleSlotChange.bind(this)}></slot>
 
-      ${!this.disabled
-        ? html`
-            <div class="tooltip-positioner">
-              <div
-                part="base"
-                id=${this.componentId}
-                class=${classMap({
-                  tooltip: true,
-                  'tooltip--open': this.open
-                })}
-                role="tooltip"
-                aria-hidden=${this.open ? 'false' : 'true'}
-              >
-                <slot name="content">${this.content}</slot>
-              </div>
-            </div>
-          `
-        : ''}
+      <div class="tooltip-positioner">
+        <div
+          part="base"
+          id=${this.componentId}
+          class=${classMap({
+            tooltip: true,
+            'tooltip--open': this.open
+          })}
+          role="tooltip"
+          aria-hidden=${this.open ? 'false' : 'true'}
+        >
+          <slot name="content">${this.content}</slot>
+        </div>
+      </div>
     `;
   }
 }