35 lines
1.3 KiB
JavaScript
35 lines
1.3 KiB
JavaScript
import { LionPopup } from '@lion/popup';
|
|
import { overlays, LocalOverlayController } from '@lion/overlays';
|
|
|
|
export class LionTooltip extends LionPopup {
|
|
connectedCallback() {
|
|
super.connectedCallback();
|
|
this.contentNode = this.querySelector('[slot="content"]');
|
|
this.invokerNode = this.querySelector('[slot="invoker"]');
|
|
|
|
this._controller = overlays.add(
|
|
new LocalOverlayController({
|
|
hidesOnEsc: true,
|
|
hidesOnOutsideClick: true,
|
|
popperConfig: this.popperConfig,
|
|
contentNode: this.contentNode,
|
|
invokerNode: this.invokerNode,
|
|
}),
|
|
);
|
|
this._show = () => this._controller.show();
|
|
this._hide = () => this._controller.hide();
|
|
|
|
this.invokerNode.addEventListener('mouseenter', this._show);
|
|
this.invokerNode.addEventListener('mouseleave', this._hide);
|
|
this.invokerNode.addEventListener('focusin', this._show);
|
|
this.invokerNode.addEventListener('focusout', this._hide);
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
super.disconnectedCallback();
|
|
this.invokerNode.removeEventListener('mouseenter', this._show);
|
|
this.invokerNode.removeEventListener('mouseleave', this._hide);
|
|
this.invokerNode.removeEventListener('focusin', this._show);
|
|
this.invokerNode.removeEventListener('focusout', this._hide);
|
|
}
|
|
}
|