Dev.to Events

by Danny Engelman

HTML

<my-tooltip tip-text="World!">Hello</my-tooltip>
<my-tooltip>Hello</my-tooltip>

<script>
  customElements.define("my-tooltip", class Tooltip extends HTMLElement {
    constructor() {
      super()
        .attachShadow({mode: "open"})
        .innerHTML = /*html*/ `
            <style>
             :host{ font-size: 24px; display: inline-block }
             span:not(:empty) {
                   padding: 1rem;
                   border-radius: 10px;
                   background-color: black;
                   color: white;
               }
            </style>
            <slot></slot> 👉 <span></span>`;
      const tooltip = this.shadowRoot.querySelector("span");
      this.onmouseover = (evt) => {
        tooltip.innerHTML = this.getAttribute("tip-text") || "Default Text";
      }
      this.onmouseleave = (evt) => {
        tooltip.innerHTML = "";
      }
    }
  })
</script>