ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(tooltip): make tooltip hoverable

Browse source
This commit is contained in:
erik 2019-09-02 15:17:31 +02:00
parent b8e9926056
commit 73e2305164
2 changed files with 6 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
packages/tooltip/src/LionTooltip.js
View file

@ -20,16 +20,16 @@ export class LionTooltip extends LionPopup {
this._show = () => this._controller.show(); this._show = () => this._controller.show();
this._hide = () => this._controller.hide(); this._hide = () => this._controller.hide();
this.invokerNode.addEventListener('mouseenter', this._show); this.addEventListener('mouseenter', this._show);
this.invokerNode.addEventListener('mouseleave', this._hide); this.addEventListener('mouseleave', this._hide);
this.invokerNode.addEventListener('focusin', this._show); this.invokerNode.addEventListener('focusin', this._show);
this.invokerNode.addEventListener('focusout', this._hide); this.invokerNode.addEventListener('focusout', this._hide);
} }
disconnectedCallback() { disconnectedCallback() {
super.disconnectedCallback(); super.disconnectedCallback();
this.invokerNode.removeEventListener('mouseenter', this._show); this.removeEventListener('mouseenter', this._show);
this.invokerNode.removeEventListener('mouseleave', this._hide); this.removeEventListener('mouseleave', this._hide);
this.invokerNode.removeEventListener('focusin', this._show); this.invokerNode.removeEventListener('focusin', this._show);
this.invokerNode.removeEventListener('focusout', this._hide); this.invokerNode.removeEventListener('focusout', this._hide);
} }

5
packages/tooltip/test/lion-tooltip.test.js
View file

@ -21,13 +21,12 @@ describe('lion-tooltip', () => {
<lion-button slot="invoker">Tooltip button</lion-button> <lion-button slot="invoker">Tooltip button</lion-button>
</lion-tooltip> </lion-tooltip>
`); `);
const invoker = el.querySelector('[slot="invoker"]');
const eventMouseEnter = new Event('mouseenter'); const eventMouseEnter = new Event('mouseenter');
invoker.dispatchEvent(eventMouseEnter); el.dispatchEvent(eventMouseEnter);
await el.updateComplete; await el.updateComplete;
expect(el.querySelector('[slot="content"]').style.display).to.be.equal('inline-block'); expect(el.querySelector('[slot="content"]').style.display).to.be.equal('inline-block');
const eventMouseLeave = new Event('mouseleave'); const eventMouseLeave = new Event('mouseleave');
invoker.dispatchEvent(eventMouseLeave); el.dispatchEvent(eventMouseLeave);
await el.updateComplete; await el.updateComplete;
expect(el.querySelector('[slot="content"]').style.display).to.be.equal('none'); expect(el.querySelector('[slot="content"]').style.display).to.be.equal('none');
}); });