Add tool-tip component

src/fontra/client/web-components/tooltip.js

@@ -0,0 +1,63 @@
+import { UnlitElement } from "/core/unlit.js";
+import * as html from "/core/unlit.js";
+
+export class Tooltip extends UnlitElement {
+  static styles = `
+  .tooltip {
+    background: #f2f2f2;
+    position: absolute;
+    width: 200px;
+    padding: 9px;
+    margin: 6px 0;
+    box-shadow: 0 0 4px 0 #686868;
+  }
+
+  .hidden {
+    display: none;
+  }
+  `;
+
+  constructor() {
+    super();
+    this.x = 0;
+    this.y = 0;
+  }
+
+  connectedCallback() {
+    const showFor = this.parentElement.querySelector(this.showFor);
+    const observer = new ResizeObserver(() => {
+      if (!this._element) {
+        return;
+      }
+      const boundingClientRect = showFor.getBoundingClientRect();
+      this.x = boundingClientRect.x;
+      this.y = boundingClientRect.y + boundingClientRect.height;
+      this._element.style.top = this.y + "px";
+      this._element.style.left = this.x + "px";
+    });
+    observer.observe(showFor);
+    showFor.addEventListener("mouseover", () => {
+      this._element.classList.remove("hidden");
+    });
+    showFor.addEventListener("mouseout", () => {
+      this._element.classList.add("hidden");
+    });
+  }
+
+  static properties = {
+    text: { type: String },
+    showFor: { type: String },
+  };
+
+  render() {
+    this._element = html.div(
+      {
+        class: "tooltip hidden",
+      },
+      this.text
+    );
+    return this._element;
+  }
+}
+
+customElements.define("tool-tip", Tooltip);

src/fontra/views/editor/panel-designspace-navigation.js

@@ -21,6 +21,7 @@ import {
 import { showMenu } from "/web-components/menu-panel.js";
 import { dialogSetup } from "/web-components/modal-dialog.js";
 import { IconButton } from "/web-components/icon-button.js";
+import { Tooltip } from "/web-components/tooltip.js";
 import { NumberFormatter } from "/web-components/ui-list.js";
 import Panel from "./panel.js";
 
@@ -83,13 +84,21 @@ export default class DesignspaceNavigationPanel extends Panel {
           []
         ),
         html.div({ class: "axis-buttons-container" }, [
+          html.createDomElement("tool-tip", {
+            text: "Reset all axes",
+            showFor: "#reset-axes-button",
+          }),
           html.createDomElement("icon-button", {
             id: "reset-axes-button",
             src: "/tabler-icons/refresh.svg",
             onclick: (event) => this.resetAllAxesToDefault(event),
             disabled: false,
             hidden: true,
           }),
+          html.createDomElement("tool-tip", {
+            text: "Edit local axes",
+            showFor: "#edit-local-axes-button",
+          }),
           html.createDomElement("icon-button", {
             id: "edit-local-axes-button",
             src: "/tabler-icons/settings.svg",