diff --git a/src/components/tooltip/tooltip.test.ts b/src/components/tooltip/tooltip.test.ts
index 120f1100c..230126087 100644
--- a/src/components/tooltip/tooltip.test.ts
+++ b/src/components/tooltip/tooltip.test.ts
@@ -9,9 +9,9 @@ describe('', () => {
Hover Me
`);
- const base = el.shadowRoot!.querySelector('[part="body"]')!;
+ const body = el.shadowRoot!.querySelector('[part="body"]')!;
- expect(base.hidden).to.be.false;
+ expect(body.hidden).to.be.false;
});
it('should not be visible without the open attribute', async () => {
@@ -20,9 +20,9 @@ describe('', () => {
Hover Me
`);
- const base = el.shadowRoot!.querySelector('[part="body"]')!;
+ const body = el.shadowRoot!.querySelector('[part="body"]')!;
- expect(base.hidden).to.be.true;
+ expect(body.hidden).to.be.true;
});
it('should emit sl-show and sl-after-show when calling show()', async () => {
@@ -31,7 +31,7 @@ describe('', () => {
Hover Me
`);
- const base = el.shadowRoot!.querySelector('[part="body"]')!;
+ const body = el.shadowRoot!.querySelector('[part="body"]')!;
const showHandler = sinon.spy();
const afterShowHandler = sinon.spy();
@@ -44,7 +44,7 @@ describe('', () => {
expect(showHandler).to.have.been.calledOnce;
expect(afterShowHandler).to.have.been.calledOnce;
- expect(base.hidden).to.be.false;
+ expect(body.hidden).to.be.false;
});
it('should emit sl-hide and sl-after-hide when calling hide()', async () => {
@@ -53,7 +53,7 @@ describe('', () => {
Hover Me
`);
- const base = el.shadowRoot!.querySelector('[part="body"]')!;
+ const body = el.shadowRoot!.querySelector('[part="body"]')!;
const hideHandler = sinon.spy();
const afterHideHandler = sinon.spy();
@@ -66,7 +66,7 @@ describe('', () => {
expect(hideHandler).to.have.been.calledOnce;
expect(afterHideHandler).to.have.been.calledOnce;
- expect(base.hidden).to.be.true;
+ expect(body.hidden).to.be.true;
});
it('should emit sl-show and sl-after-show when setting open = true', async () => {
@@ -75,7 +75,7 @@ describe('', () => {
Hover Me
`);
- const base = el.shadowRoot!.querySelector('[part="body"]')!;
+ const body = el.shadowRoot!.querySelector('[part="body"]')!;
const showHandler = sinon.spy();
const afterShowHandler = sinon.spy();
@@ -88,7 +88,7 @@ describe('', () => {
expect(showHandler).to.have.been.calledOnce;
expect(afterShowHandler).to.have.been.calledOnce;
- expect(base.hidden).to.be.false;
+ expect(body.hidden).to.be.false;
});
it('should emit sl-hide and sl-after-hide when setting open = false', async () => {
@@ -97,7 +97,7 @@ describe('', () => {
Hover Me
`);
- const base = el.shadowRoot!.querySelector('[part="body"]')!;
+ const body = el.shadowRoot!.querySelector('[part="body"]')!;
const hideHandler = sinon.spy();
const afterHideHandler = sinon.spy();
@@ -110,7 +110,7 @@ describe('', () => {
expect(hideHandler).to.have.been.calledOnce;
expect(afterHideHandler).to.have.been.calledOnce;
- expect(base.hidden).to.be.true;
+ expect(body.hidden).to.be.true;
});
it('should hide the tooltip when tooltip is visible and disabled becomes true', async () => {
@@ -119,7 +119,7 @@ describe('', () => {
Hover Me
`);
- const base = el.shadowRoot!.querySelector('[part="body"]')!;
+ const body = el.shadowRoot!.querySelector('[part="body"]')!;
const hideHandler = sinon.spy();
const afterHideHandler = sinon.spy();
@@ -132,6 +132,18 @@ describe('', () => {
expect(hideHandler).to.have.been.calledOnce;
expect(afterHideHandler).to.have.been.calledOnce;
- expect(base.hidden).to.be.true;
+ expect(body.hidden).to.be.true;
+ });
+
+ it('should show when open initially', async () => {
+ const el = await fixture(html`
+
+ Hover Me
+
+ `);
+ const body = el.shadowRoot!.querySelector('[part="body"]')!;
+ await el.updateComplete;
+
+ expect(body.hidden).to.be.false;
});
});
diff --git a/src/components/tooltip/tooltip.ts b/src/components/tooltip/tooltip.ts
index af8c45179..419a0768e 100644
--- a/src/components/tooltip/tooltip.ts
+++ b/src/components/tooltip/tooltip.ts
@@ -111,12 +111,12 @@ export default class SlTooltip extends LitElement {
});
}
- async firstUpdated() {
+ firstUpdated() {
this.body.hidden = !this.open;
// If the tooltip is visible on init, update its position
if (this.open) {
- await this.updateComplete;
+ this.popup.active = true;
this.popup.reposition();
}
}