The tooltip should be initially hidden and displayed only when the user interacts with the element it's hinting. Add the show and hide methods so they can be called to manage the display of the tooltip. The best way to enforce the hidden styling is to use an inline style, because that has the highest precedence in css.
show= () => {
this.style.cssText='';
};
hide= () => {
this.style.display='none';
};
The show and hide methods are defined using
arrow functions.
This binds the functions to the element and makes it simpler to use them
with add/removeEventListener which you'll do next.
To ensure the tooltip is initially hidden, call the hide method in connectedCallback. This standard custom element lifecycle callback is run when the element is connected to the DOM.
connectedCallback() {
super.connectedCallback();
this.hide();
}
Call super.connectedCallback() in connectedCallback.
It's important to call super.connectedCallback() to preserve LitElement's
default implementation.