From 7f7ed4edd8b0e255c3c8f0a2aecf47ad2e9924d4 Mon Sep 17 00:00:00 2001
From: Fatih Erikli <fatih.erikli.work@gmail.com>
Date: Thu, 31 Aug 2023 12:50:53 +0300
Subject: [PATCH] Add tool-tip component

---
 src/fontra/client/web-components/tooltip.js   | 63 +++++++++++++++++++
 .../editor/panel-designspace-navigation.js    |  9 +++
 2 files changed, 72 insertions(+)
 create mode 100644 src/fontra/client/web-components/tooltip.js

diff --git a/src/fontra/client/web-components/tooltip.js b/src/fontra/client/web-components/tooltip.js
new file mode 100644
index 000000000..8704b9c76
--- /dev/null
+++ b/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);
diff --git a/src/fontra/views/editor/panel-designspace-navigation.js b/src/fontra/views/editor/panel-designspace-navigation.js
index 2a530866f..f6f30b64e 100644
--- a/src/fontra/views/editor/panel-designspace-navigation.js
+++ b/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,6 +84,10 @@ 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",
@@ -90,6 +95,10 @@ export default class DesignspaceNavigationPanel extends Panel {
             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",