From 3c9a4812ca94fcbbda8d01db370a67b0f0ccabc4 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Thu, 1 Apr 2021 07:38:17 -0400
Subject: [PATCH] fixes #391

---
 docs/resources/changelog.md       |  1 +
 src/components/tooltip/tooltip.ts | 43 +++++++++++++++++--------------
 2 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index ca499117e..284a94693 100644
--- a/docs/resources/changelog.md
+++ b/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
diff --git a/src/components/tooltip/tooltip.ts b/src/components/tooltip/tooltip.ts
index 1079c1ab6..37f4b3703 100644
--- a/src/components/tooltip/tooltip.ts
+++ b/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>
     `;
   }
 }