Tooltip: Recalculate target after slotchange (#831)

* Tooltip: Recalculate target after slotchange

The tooltip's positioning breaks after a slotchange, unless the tooltips target is recalculated.

* Update src/components/tooltip/tooltip.test.ts

Co-authored-by: Cory LaViska <cory@abeautifulsite.net>

src/components/tooltip/tooltip.test.ts

@@ -134,4 +134,17 @@ describe('<sl-tooltip>', () => {
     expect(afterHideHandler).to.have.been.calledOnce;
     expect(base.hidden).to.be.true;
   });
+
+  it('should recalculate its target when the slotted element changes', async () => {
+    const el = await fixture<SlTooltip>(html`
+      <sl-tooltip content="This is a tooltip" open>
+        <sl-button>Hover me</sl-button>
+      </sl-tooltip>
+    `);
+
+    el.innerHTML = '<sl-button>New element</sl-button>';
+    await el.updateComplete;
+
+    expect(el.getTarget().textContent).to.equal('New element');
+  });
 });

src/components/tooltip/tooltip.ts

@@ -262,6 +262,10 @@ export default class SlTooltip extends LitElement {
     return triggers.includes(triggerType);
   }
 
+  handleSlotChange() {
+    this.target = this.getTarget();
+  }
+
   private startPositioner() {
     this.stopPositioner();
     this.updatePositioner();
@@ -319,7 +323,7 @@ export default class SlTooltip extends LitElement {
   render() {
     return html`
       <div class="tooltip-target" aria-describedby="tooltip">
-        <slot></slot>
+        <slot @slotchange=${this.handleSlotChange}></slot>
       </div>
 
       <div class="tooltip-positioner">