diff --git a/index.html b/index.html
index 7cd238a1..734bce55 100644
--- a/index.html
+++ b/index.html
@@ -7703,9 +7703,9 @@
     <script src="libs/polylabel.min.js"></script>
     <script src="libs/lineclip.min.js"></script>
     <script src="libs/alea.min.js"></script>
-    <script src="modules/fonts.js"></script>
+    <script type="module" src="modules/fonts.js"></script>
     <script type="module" src="modules/ui/layers.js"></script>
-    <script src="modules/ui/stylePresets.js"></script>
+    <script type="modile" src="modules/ui/stylePresets.js"></script>
     <script type="module" src="modules/ui/general.js?v=1.87.00"></script>
     <script type="module" src="modules/ui/options.js?v=1.87.00"></script>
 
@@ -7755,7 +7755,6 @@
     <script type="module" src="modules/coa-renderer.js"></script>
     <script defer src="libs/rgbquant.min.js"></script>
     <script defer src="libs/jquery.ui.touch-punch.min.js"></script>
-    number[][]
     <script type="module" src="modules/io/save.js"></script>
     <script type="module" src="modules/io/load.js?v=1.87.00"></script>
     <script type="module" src="modules/io/cloud.js"></script>
diff --git a/modules/define-svg.js b/modules/define-svg.js
index 5f59577e..0e71d13a 100644
--- a/modules/define-svg.js
+++ b/modules/define-svg.js
@@ -150,13 +150,6 @@ function defineSvg(width, height) {
     .attr("fill", "#e8f0f6")
     .attr("filter", "url(#splotch)");
 
-  // assign events separately as not a viewbox child
-  scaleBar.on("mousemove", () => tip("Click to open Units Editor")).on("click", () => editUnits());
-
-  legend
-    .on("mousemove", () => tip("Drag to change the position. Click to hide the legend"))
-    .on("click", () => clearLegend());
-
   landmass.append("rect").attr("x", 0).attr("y", 0).attr("width", width).attr("height", height);
 
   oceanPattern
diff --git a/modules/dynamic/editors/cultures-editor.js b/modules/dynamic/editors/cultures-editor.js
index e2883238..a1969ca3 100644
--- a/modules/dynamic/editors/cultures-editor.js
+++ b/modules/dynamic/editors/cultures-editor.js
@@ -1,6 +1,6 @@
 import {restoreDefaultEvents} from "/src/scripts/events";
 import {findAll, findCell, getPackPolygon, isLand} from "/src/utils/graphUtils";
-import {showMainTip, clearMainTip} from "/src/scripts/tooltips";
+import {tip, showMainTip, clearMainTip} from "/src/scripts/tooltips";
 import {byId} from "/src/utils/shorthands";
 
 const $body = insertEditorHtml();
@@ -59,7 +59,6 @@ function insertEditorHtml() {
         <label data-tip="Change brush size" data-shortcut="+ (increase), – (decrease)" class="italic">Brush size:
           <input
             id="culturesManuallyBrush"
-            oninput="tip('Brush size: '+this.value); culturesManuallyBrushNumber.value = this.value"
             type="range"
             min="5"
             max="99"
@@ -68,7 +67,6 @@ function insertEditorHtml() {
           />
           <input
             id="culturesManuallyBrushNumber"
-            oninput="tip('Brush size: '+this.value); culturesManuallyBrush.value = this.value"
             type="number"
             min="5"
             max="99"
diff --git a/modules/dynamic/editors/religions-editor.js b/modules/dynamic/editors/religions-editor.js
index ba468f81..3c582dd7 100644
--- a/modules/dynamic/editors/religions-editor.js
+++ b/modules/dynamic/editors/religions-editor.js
@@ -1,6 +1,6 @@
 import {restoreDefaultEvents} from "/src/scripts/events";
 import {findAll, findCell, getPackPolygon, isLand} from "/src/utils/graphUtils";
-import {showMainTip, clearMainTip} from "/src/scripts/tooltips";
+import {tip, showMainTip, clearMainTip} from "/src/scripts/tooltips";
 import {byId} from "/src/utils/shorthands";
 
 const $body = insertEditorHtml();
diff --git a/modules/dynamic/editors/states-editor.js b/modules/dynamic/editors/states-editor.js
index 838ed555..6a7c33f0 100644
--- a/modules/dynamic/editors/states-editor.js
+++ b/modules/dynamic/editors/states-editor.js
@@ -1,7 +1,7 @@
 import {restoreDefaultEvents} from "/src/scripts/events";
 import {findAll, findCell, getPackPolygon, isLand} from "/src/utils/graphUtils";
 import {byId} from "/src/utils/shorthands";
-import {showMainTip, clearMainTip} from "/src/scripts/tooltips";
+import {tip, showMainTip, clearMainTip} from "/src/scripts/tooltips";
 
 const $body = insertEditorHtml();
 addListeners();
diff --git a/modules/dynamic/export-json.js b/modules/dynamic/export-json.js
index d9e6d42e..b9f25e44 100644
--- a/modules/dynamic/export-json.js
+++ b/modules/dynamic/export-json.js
@@ -1,3 +1,5 @@
+import {tip} from "/src/scripts/tooltips";
+
 export function exportToJson(type) {
   if (customization)
     return tip("Data cannot be exported when edit mode is active, please exit the mode and retry", false, "error");
diff --git a/modules/dynamic/hierarchy-tree.js b/modules/dynamic/hierarchy-tree.js
index 6236bb54..3375a281 100644
--- a/modules/dynamic/hierarchy-tree.js
+++ b/modules/dynamic/hierarchy-tree.js
@@ -1,4 +1,5 @@
 import {byId} from "/src/utils/shorthands";
+import {tip} from "/src/scripts/tooltips";
 
 appendStyleSheet();
 insertHtml();
diff --git a/modules/dynamic/installation.js b/modules/dynamic/installation.js
index a9f2f789..c6bee118 100644
--- a/modules/dynamic/installation.js
+++ b/modules/dynamic/installation.js
@@ -1,3 +1,5 @@
+import {tip} from "/src/scripts/tooltips";
+
 // module to prompt PWA installation
 let installButton = null;
 let deferredPrompt = null;
diff --git a/modules/dynamic/overview/charts-overview.js b/modules/dynamic/overview/charts-overview.js
index 3baa6536..a491fcdf 100644
--- a/modules/dynamic/overview/charts-overview.js
+++ b/modules/dynamic/overview/charts-overview.js
@@ -1,5 +1,6 @@
 import {rollups} from "../../../utils/functionUtils.js";
 import {isWater} from "/src/utils/graphUtils";
+import {tip} from "/src/scripts/tooltips";
 import {byId} from "/src/utils/shorthands";
 
 const entitiesMap = {
diff --git a/modules/fonts.js b/modules/fonts.js
index 9e97d277..80bec57b 100644
--- a/modules/fonts.js
+++ b/modules/fonts.js
@@ -1,4 +1,4 @@
-"use strict";
+import {tip} from "/src/scripts/tooltips";
 
 const fonts = [
   {family: "Arial"},
@@ -38,12 +38,14 @@ const fonts = [
   {
     family: "Architects Daughter",
     src: "url(https://fonts.gstatic.com/s/architectsdaughter/v8/RXTgOOQ9AAtaVOHxx0IUBM3t7GjCYufj5TXV5VnA2p8.woff2)",
-    unicodeRange: "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
+    unicodeRange:
+      "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
   },
   {
     family: "Bitter",
     src: "url(https://fonts.gstatic.com/s/bitter/v12/zfs6I-5mjWQ3nxqccMoL2A.woff2)",
-    unicodeRange: "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
+    unicodeRange:
+      "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
   },
   {
     family: "Caesar Dressing",
@@ -54,12 +56,14 @@ const fonts = [
   {
     family: "Cinzel",
     src: "url(https://fonts.gstatic.com/s/cinzel/v7/zOdksD_UUTk1LJF9z4tURA.woff2)",
-    unicodeRange: "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
+    unicodeRange:
+      "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
   },
   {
     family: "Dancing Script",
     src: "url(https://fonts.gstatic.com/s/dancingscript/v9/KGBfwabt0ZRLA5W1ywjowUHdOuSHeh0r6jGTOGdAKHA.woff2)",
-    unicodeRange: "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
+    unicodeRange:
+      "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
   },
   {
     family: "Faster One",
@@ -82,12 +86,14 @@ const fonts = [
   {
     family: "Gloria Hallelujah",
     src: "url(https://fonts.gstatic.com/s/gloriahallelujah/v9/CA1k7SlXcY5kvI81M_R28cNDay8z-hHR7F16xrcXsJw.woff2)",
-    unicodeRange: "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
+    unicodeRange:
+      "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
   },
   {
     family: "Great Vibes",
     src: "url(https://fonts.gstatic.com/s/greatvibes/v5/6q1c0ofG6NKsEhAc2eh-3Y4P5ICox8Kq3LLUNMylGO4.woff2)",
-    unicodeRange: "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
+    unicodeRange:
+      "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
   },
   {
     family: "Henny Penny",
@@ -98,7 +104,8 @@ const fonts = [
   {
     family: "IM Fell English",
     src: "url(https://fonts.gstatic.com/s/imfellenglish/v7/xwIisCqGFi8pff-oa9uSVAkYLEKE0CJQa8tfZYc_plY.woff2)",
-    unicodeRange: "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
+    unicodeRange:
+      "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
   },
   {
     family: "Kelly Slab",
@@ -121,7 +128,8 @@ const fonts = [
   {
     family: "Kaushan Script",
     src: "url(https://fonts.gstatic.com/s/kaushanscript/v6/qx1LSqts-NtiKcLw4N03IEd0sm1ffa_JvZxsF_BEwQk.woff2)",
-    unicodeRange: "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
+    unicodeRange:
+      "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
   },
   {
     family: "Macondo",
@@ -150,7 +158,8 @@ const fonts = [
   {
     family: "Montez",
     src: "url(https://fonts.gstatic.com/s/montez/v8/aq8el3-0osHIcFK6bXAPkw.woff2)",
-    unicodeRange: "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
+    unicodeRange:
+      "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
   },
   {
     family: "Nova Script",
@@ -161,7 +170,8 @@ const fonts = [
   {
     family: "Orbitron",
     src: "url(https://fonts.gstatic.com/s/orbitron/v9/HmnHiRzvcnQr8CjBje6GQvesZW2xOQ-xsNqO47m55DA.woff2)",
-    unicodeRange: "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
+    unicodeRange:
+      "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
   },
   {
     family: "Oregano",
@@ -184,12 +194,14 @@ const fonts = [
   {
     family: "Satisfy",
     src: "url(https://fonts.gstatic.com/s/satisfy/v8/2OzALGYfHwQjkPYWELy-cw.woff2)",
-    unicodeRange: "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
+    unicodeRange:
+      "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
   },
   {
     family: "Shadows Into Light",
     src: "url(https://fonts.gstatic.com/s/shadowsintolight/v7/clhLqOv7MXn459PTh0gXYFK2TSYBz0eNcHnp4YqE4Ts.woff2)",
-    unicodeRange: "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
+    unicodeRange:
+      "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
   },
   {
     family: "Tapestry",
@@ -218,7 +230,8 @@ const fonts = [
   {
     family: "Yellowtail",
     src: "url(https://fonts.gstatic.com/s/yellowtail/v8/GcIHC9QEwVkrA19LJU1qlPk_vArhqVIZ0nv9q090hN8.woff2)",
-    unicodeRange: "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
+    unicodeRange:
+      "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
   }
 ];
 
diff --git a/modules/io/cloud.js b/modules/io/cloud.js
index 01338c0b..998d2338 100644
--- a/modules/io/cloud.js
+++ b/modules/io/cloud.js
@@ -1,4 +1,4 @@
-"use strict";
+import {tip} from "/src/scripts/tooltips";
 
 /*
 Cloud provider implementations (Dropbox only as now)
@@ -13,7 +13,6 @@ async list(): list available filenames at provider
 async getLink(filePath): get shareable link for file
 restore(): restore access tokens from storage if possible
 */
-
 window.Cloud = (function () {
   // helpers to use in providers for token handling
   const lSKey = x => `auth-${x}`;
diff --git a/modules/io/export.js b/modules/io/export.js
index 6bb910d5..33f592f2 100644
--- a/modules/io/export.js
+++ b/modules/io/export.js
@@ -1,5 +1,6 @@
 import {getGridPolygon} from "/src/utils/graphUtils";
 import {unique} from "/src/utils/arrayUtils";
+import {tip} from "/src/scripts/tooltips";
 
 // download map as SVG
 async function saveSVG() {
@@ -10,12 +11,8 @@ async function saveSVG() {
   link.href = url;
   link.click();
 
-  tip(
-    `${link.download} is saved. Open "Downloads" screen (crtl + J) to check. You can set image scale in options`,
-    true,
-    "success",
-    5000
-  );
+  const tooltip = `${link.download} is saved. Open "Downloads" screen (CTRL + J) to check. You can image scale in options`;
+  tip(tooltip, true, "success", 5000);
   TIME && console.timeEnd("saveSVG");
 }
 
diff --git a/modules/io/load.js b/modules/io/load.js
index 90ebfb86..8dfd355f 100644
--- a/modules/io/load.js
+++ b/modules/io/load.js
@@ -1,6 +1,7 @@
 import {restoreDefaultEvents} from "/src/scripts/events";
 import {calculateVoronoi, findCell} from "/src/utils/graphUtils";
 import {last} from "/src/utils/arrayUtils";
+import {tip} from "/src/scripts/tooltips";
 
 function quickLoad() {
   ldb.get("lastMap", blob => {
diff --git a/modules/io/save.js b/modules/io/save.js
index db303eff..99d95e99 100644
--- a/modules/io/save.js
+++ b/modules/io/save.js
@@ -1,4 +1,5 @@
-"use strict";
+import {tip} from "/src/scripts/tooltips";
+
 // functions to save project as .map file
 
 // prepare map data for saving
@@ -122,7 +123,8 @@ function getMapData() {
 
 // Download .map file
 function dowloadMap() {
-  if (customization) return tip("Map cannot be saved when edit mode is active, please exit the mode and retry", false, "error");
+  if (customization)
+    return tip("Map cannot be saved when edit mode is active, please exit the mode and retry", false, "error");
   closeDialogs("#alert");
 
   const mapData = getMapData();
@@ -137,7 +139,8 @@ function dowloadMap() {
 }
 
 async function saveToDropbox() {
-  if (customization) return tip("Map cannot be saved when edit mode is active, please exit the mode and retry", false, "error");
+  if (customization)
+    return tip("Map cannot be saved when edit mode is active, please exit the mode and retry", false, "error");
   closeDialogs("#alert");
   const mapData = getMapData();
   const filename = getFileName() + ".map";
@@ -151,7 +154,8 @@ async function saveToDropbox() {
 }
 
 function quickSave() {
-  if (customization) return tip("Map cannot be saved when edit mode is active, please exit the mode and retry", false, "error");
+  if (customization)
+    return tip("Map cannot be saved when edit mode is active, please exit the mode and retry", false, "error");
 
   const mapData = getMapData();
   const blob = new Blob([mapData], {type: "text/plain"});
diff --git a/modules/names-generator.js b/modules/names-generator.js
index 68c2a141..04517c62 100644
--- a/modules/names-generator.js
+++ b/modules/names-generator.js
@@ -1,5 +1,6 @@
 import {last} from "/src/utils/arrayUtils";
 import {locked} from "/src/scripts/options/lock";
+import {tip} from "/src/scripts/tooltips";
 
 window.Names = (function () {
   let chains = [];
diff --git a/modules/ui/3d.js b/modules/ui/3d.js
index 3135c6e1..ea290279 100644
--- a/modules/ui/3d.js
+++ b/modules/ui/3d.js
@@ -1,4 +1,4 @@
-"use strict";
+import {tip} from "/src/scripts/tooltips";
 
 window.ThreeD = (function () {
   const options = {
@@ -242,7 +242,11 @@ window.ThreeD = (function () {
     context2d.fillStyle = color;
     context2d.fillText(text, 0, size * quality);
 
-    return textureToSprite(context2d.canvas.toDataURL(), context2d.canvas.width / quality, context2d.canvas.height / quality);
+    return textureToSprite(
+      context2d.canvas.toDataURL(),
+      context2d.canvas.width / quality,
+      context2d.canvas.height / quality
+    );
   }
 
   function get3dCoords(baseX, baseY) {
@@ -297,8 +301,20 @@ window.ThreeD = (function () {
 
     const city_icon_material = new THREE.MeshPhongMaterial({color: cityOptions.iconColor});
     const town_icon_material = new THREE.MeshPhongMaterial({color: townOptions.iconColor});
-    const city_icon_geometry = new THREE.CylinderGeometry(cityOptions.iconSize * 2, cityOptions.iconSize * 2, cityOptions.iconSize, 16, 1);
-    const town_icon_geometry = new THREE.CylinderGeometry(townOptions.iconSize * 2, townOptions.iconSize * 2, townOptions.iconSize, 16, 1);
+    const city_icon_geometry = new THREE.CylinderGeometry(
+      cityOptions.iconSize * 2,
+      cityOptions.iconSize * 2,
+      cityOptions.iconSize,
+      16,
+      1
+    );
+    const town_icon_geometry = new THREE.CylinderGeometry(
+      townOptions.iconSize * 2,
+      townOptions.iconSize * 2,
+      townOptions.iconSize,
+      16,
+      1
+    );
     const line_material = new THREE.LineBasicMaterial({color: cityOptions.iconColor});
 
     // burg labels
@@ -464,7 +480,10 @@ window.ThreeD = (function () {
 
     // scene
     scene = new THREE.Scene();
-    scene.background = new THREE.TextureLoader().load("https://i0.wp.com/azgaar.files.wordpress.com/2019/10/stars-1.png", render);
+    scene.background = new THREE.TextureLoader().load(
+      "https://i0.wp.com/azgaar.files.wordpress.com/2019/10/stars-1.png",
+      render
+    );
 
     // Renderer
     Renderer = new THREE.WebGLRenderer({canvas, antialias: true, preserveDrawingBuffer: true});
diff --git a/modules/ui/battle-screen.js b/modules/ui/battle-screen.js
index a4010bc9..8c6f5b49 100644
--- a/modules/ui/battle-screen.js
+++ b/modules/ui/battle-screen.js
@@ -1,4 +1,5 @@
 import {last} from "/src/utils/arrayUtils";
+import {tip} from "/src/scripts/tooltips";
 
 export class Battle {
   constructor(attacker, defender) {
diff --git a/modules/ui/biomes-editor.js b/modules/ui/biomes-editor.js
index f3c57471..9eae1ddf 100644
--- a/modules/ui/biomes-editor.js
+++ b/modules/ui/biomes-editor.js
@@ -1,6 +1,6 @@
 import {restoreDefaultEvents} from "/src/scripts/events";
 import {findAll, findCell, getPackPolygon, isLand} from "/src/utils/graphUtils";
-import {showMainTip, clearMainTip} from "/src/scripts/tooltips";
+import {tip, showMainTip, clearMainTip} from "/src/scripts/tooltips";
 
 export function editBiomes() {
   if (customization) return;
diff --git a/modules/ui/burg-editor.js b/modules/ui/burg-editor.js
index e4911bbf..e236a30b 100644
--- a/modules/ui/burg-editor.js
+++ b/modules/ui/burg-editor.js
@@ -1,5 +1,5 @@
 import {findCell} from "/src/utils/graphUtils";
-import {clearMainTip} from "/src/scripts/tooltips";
+import {tip, clearMainTip} from "/src/scripts/tooltips";
 
 export function editBurg(id) {
   if (customization) return;
diff --git a/modules/ui/burgs-overview.js b/modules/ui/burgs-overview.js
index 64267821..64867852 100644
--- a/modules/ui/burgs-overview.js
+++ b/modules/ui/burgs-overview.js
@@ -1,6 +1,6 @@
 import {restoreDefaultEvents} from "/src/scripts/events";
 import {findCell} from "/src/utils/graphUtils";
-import {clearMainTip} from "/src/scripts/tooltips";
+import {tip, clearMainTip} from "/src/scripts/tooltips";
 
 export function overviewBurgs() {
   if (customization) return;
diff --git a/modules/ui/coastline-editor.js b/modules/ui/coastline-editor.js
index d14a7bfb..52ac98c9 100644
--- a/modules/ui/coastline-editor.js
+++ b/modules/ui/coastline-editor.js
@@ -1,4 +1,5 @@
 import {getPackPolygon} from "/src/utils/graphUtils";
+import {tip} from "/src/scripts/tooltips";
 
 export function editCoastline(node = d3.event.target) {
   if (customization) return;
diff --git a/modules/ui/diplomacy-editor.js b/modules/ui/diplomacy-editor.js
index a0d72333..9559ac6f 100644
--- a/modules/ui/diplomacy-editor.js
+++ b/modules/ui/diplomacy-editor.js
@@ -1,6 +1,6 @@
 import {restoreDefaultEvents} from "/src/scripts/events";
 import {findCell} from "/src/utils/graphUtils";
-import {clearMainTip} from "/src/scripts/tooltips";
+import {tip, clearMainTip} from "/src/scripts/tooltips";
 
 export function editDiplomacy() {
   if (customization) return;
diff --git a/modules/ui/editors.js b/modules/ui/editors.js
index dc7dcd57..d475fb8c 100644
--- a/modules/ui/editors.js
+++ b/modules/ui/editors.js
@@ -1,6 +1,7 @@
 import {restoreDefaultEvents} from "/src/scripts/events";
 import {findCell} from "/src/utils/graphUtils";
 import {byId} from "/src/utils/shorthands";
+import {tip} from "/src/scripts/tooltips";
 
 // clear elSelected variable
 export function unselect() {
diff --git a/modules/ui/emblems-editor.js b/modules/ui/emblems-editor.js
index e8928b16..bcfeb80a 100644
--- a/modules/ui/emblems-editor.js
+++ b/modules/ui/emblems-editor.js
@@ -1,4 +1,5 @@
 import {clearMainTip} from "/src/scripts/tooltips";
+import {tip} from "/src/scripts/tooltips";
 
 export function editEmblem(type, id, el) {
   if (customization) return;
diff --git a/modules/ui/heightmap-editor.js b/modules/ui/heightmap-editor.js
index 5c6c32da..b209bbe2 100644
--- a/modules/ui/heightmap-editor.js
+++ b/modules/ui/heightmap-editor.js
@@ -1,7 +1,7 @@
 import {restoreDefaultEvents} from "/src/scripts/events";
 import {findGridCell, findGridAll, findCell, getPackPolygon, getGridPolygon} from "/src/utils/graphUtils";
 import {last, createTypedArray} from "/src/utils/arrayUtils";
-import {showMainTip, clearMainTip} from "/src/scripts/tooltips";
+import {tip, showMainTip, clearMainTip} from "/src/scripts/tooltips";
 import {byId} from "/src/utils/shorthands";
 
 export function editHeightmap(options) {
diff --git a/modules/ui/ice-editor.js b/modules/ui/ice-editor.js
index 3b1175c2..da156f02 100644
--- a/modules/ui/ice-editor.js
+++ b/modules/ui/ice-editor.js
@@ -1,5 +1,5 @@
 import {findGridCell, getGridPolygon} from "/src/utils/graphUtils";
-import {clearMainTip} from "/src/scripts/tooltips";
+import {tip, clearMainTip} from "/src/scripts/tooltips";
 
 export function editIce() {
   if (customization) return;
diff --git a/modules/ui/labels-editor.js b/modules/ui/labels-editor.js
index e1fee166..17541a0c 100644
--- a/modules/ui/labels-editor.js
+++ b/modules/ui/labels-editor.js
@@ -1,5 +1,5 @@
 import {findCell} from "/src/utils/graphUtils";
-import {showMainTip} from "/src/scripts/tooltips";
+import {tip, showMainTip} from "/src/scripts/tooltips";
 
 export function editLabel() {
   if (customization) return;
diff --git a/modules/ui/lakes-editor.js b/modules/ui/lakes-editor.js
index 961e4111..5ea9a24d 100644
--- a/modules/ui/lakes-editor.js
+++ b/modules/ui/lakes-editor.js
@@ -1,4 +1,5 @@
 import {getPackPolygon} from "/src/utils/graphUtils";
+import {tip} from "/src/scripts/tooltips";
 
 export function editLake() {
   if (customization) return;
diff --git a/modules/ui/layers.js b/modules/ui/layers.js
index 01aaa5a4..f7d86691 100644
--- a/modules/ui/layers.js
+++ b/modules/ui/layers.js
@@ -3,6 +3,7 @@ import {invokeActiveZooming} from "../activeZooming";
 import {getGridPolygon} from "/src/utils/graphUtils";
 import {last} from "/src/utils/arrayUtils";
 import {stored, store} from "/src/utils/shorthands";
+import {tip} from "/src/scripts/tooltips";
 import {byId} from "/src/utils/shorthands";
 
 let presets = {};
diff --git a/modules/ui/military-overview.js b/modules/ui/military-overview.js
index e0b73294..72f6607c 100644
--- a/modules/ui/military-overview.js
+++ b/modules/ui/military-overview.js
@@ -1,5 +1,6 @@
-"use strict";
-function overviewMilitary() {
+import {tip} from "/src/scripts/tooltips";
+
+export function overviewMilitary() {
   if (customization) return;
   closeDialogs("#militaryOverview, .stable");
   if (!layerIsOn("toggleStates")) toggleStates();
diff --git a/modules/ui/namesbase-editor.js b/modules/ui/namesbase-editor.js
index 66026ae3..9e46839d 100644
--- a/modules/ui/namesbase-editor.js
+++ b/modules/ui/namesbase-editor.js
@@ -1,4 +1,5 @@
 import {unique} from "/src/utils/arrayUtils";
+import {tip} from "/src/scripts/tooltips";
 
 export function editNamesbase() {
   if (customization) return;
diff --git a/modules/ui/notes-editor.js b/modules/ui/notes-editor.js
index 6fa266bc..94bfca85 100644
--- a/modules/ui/notes-editor.js
+++ b/modules/ui/notes-editor.js
@@ -1,6 +1,6 @@
-"use strict";
+import {tip} from "/src/scripts/tooltips";
 
-function editNotes(id, name) {
+export function editNotes(id, name) {
   // elements
   const notesLegend = document.getElementById("notesLegend");
   const notesName = document.getElementById("notesName");
diff --git a/modules/ui/options.js b/modules/ui/options.js
index c5ce2ce2..7376056c 100644
--- a/modules/ui/options.js
+++ b/modules/ui/options.js
@@ -1,7 +1,7 @@
 import {applyOption} from "./general";
 import {last} from "/src/utils/arrayUtils";
 import {lock, locked} from "/src/scripts/options/lock";
-import {clearMainTip} from "/src/scripts/tooltips";
+import {tip, clearMainTip} from "/src/scripts/tooltips";
 import {byId, stored} from "/src/utils/shorthands";
 
 $("#optionsContainer").draggable({handle: ".drag-trigger", snap: "svg", snapMode: "both"});
diff --git a/modules/ui/provinces-editor.js b/modules/ui/provinces-editor.js
index 09a05425..efbd29d3 100644
--- a/modules/ui/provinces-editor.js
+++ b/modules/ui/provinces-editor.js
@@ -1,7 +1,7 @@
 import {restoreDefaultEvents} from "/src/scripts/events";
 import {findAll, findCell, getPackPolygon, isLand} from "/src/utils/graphUtils";
 import {unique} from "/src/utils/arrayUtils";
-import {showMainTip, clearMainTip} from "/src/scripts/tooltips";
+import {tip, showMainTip, clearMainTip} from "/src/scripts/tooltips";
 
 export function editProvinces() {
   if (customization) return;
diff --git a/modules/ui/regiment-editor.js b/modules/ui/regiment-editor.js
index 86bda2a7..400423fc 100644
--- a/modules/ui/regiment-editor.js
+++ b/modules/ui/regiment-editor.js
@@ -1,7 +1,7 @@
 import {restoreDefaultEvents} from "/src/scripts/events";
 import {findCell} from "/src/utils/graphUtils";
 import {last} from "/src/utils/arrayUtils";
-import {clearMainTip} from "/src/scripts/tooltips";
+import {tip, clearMainTip} from "/src/scripts/tooltips";
 
 export function editRegiment(selector) {
   if (customization) return;
diff --git a/modules/ui/regiments-overview.js b/modules/ui/regiments-overview.js
index 1d19d814..4497f5fd 100644
--- a/modules/ui/regiments-overview.js
+++ b/modules/ui/regiments-overview.js
@@ -1,6 +1,6 @@
 import {findCell} from "/src/utils/graphUtils";
 import {last} from "/src/utils/arrayUtils";
-import {clearMainTip} from "/src/scripts/tooltips";
+import {tip, clearMainTip} from "/src/scripts/tooltips";
 
 export function overviewRegiments(state) {
   if (customization) return;
diff --git a/modules/ui/relief-editor.js b/modules/ui/relief-editor.js
index 3987a94a..e02dffec 100644
--- a/modules/ui/relief-editor.js
+++ b/modules/ui/relief-editor.js
@@ -1,6 +1,6 @@
 import {restoreDefaultEvents} from "/src/scripts/events";
 import {findCell} from "/src/utils/graphUtils";
-import {showMainTip, clearMainTip} from "/src/scripts/tooltips";
+import {tip, showMainTip, clearMainTip} from "/src/scripts/tooltips";
 
 export function editReliefIcon() {
   if (customization) return;
diff --git a/modules/ui/rivers-creator.js b/modules/ui/rivers-creator.js
index f6c407c0..c798d7fa 100644
--- a/modules/ui/rivers-creator.js
+++ b/modules/ui/rivers-creator.js
@@ -1,7 +1,7 @@
 import {restoreDefaultEvents} from "/src/scripts/events";
 import {getPackPolygon, findCell} from "/src/utils/graphUtils";
 import {last} from "/src/utils/arrayUtils";
-import {clearMainTip} from "/src/scripts/tooltips";
+import {tip, clearMainTip} from "/src/scripts/tooltips";
 
 export function createRiver() {
   if (customization) return;
diff --git a/modules/ui/rivers-editor.js b/modules/ui/rivers-editor.js
index 11443a88..73e11a4a 100644
--- a/modules/ui/rivers-editor.js
+++ b/modules/ui/rivers-editor.js
@@ -1,5 +1,5 @@
 import {findCell, getPackPolygon} from "/src/utils/graphUtils";
-import {clearMainTip} from "/src/scripts/tooltips";
+import {tip, clearMainTip} from "/src/scripts/tooltips";
 
 export function editRiver(id) {
   if (customization) return;
diff --git a/modules/ui/routes-editor.js b/modules/ui/routes-editor.js
index 6d2a722b..14b5eecf 100644
--- a/modules/ui/routes-editor.js
+++ b/modules/ui/routes-editor.js
@@ -1,4 +1,4 @@
-import {showMainTip, clearMainTip} from "/src/scripts/tooltips";
+import {tip, showMainTip, clearMainTip} from "/src/scripts/tooltips";
 
 export function editRoute(onClick) {
   if (customization) return;
diff --git a/modules/ui/style.js b/modules/ui/style.js
index 325cda71..60c9b783 100644
--- a/modules/ui/style.js
+++ b/modules/ui/style.js
@@ -1,5 +1,4 @@
-// UI module to control the style
-"use strict";
+import {tip} from "/src/scripts/tooltips";
 
 // add available filters to lists
 {
diff --git a/modules/ui/stylePresets.js b/modules/ui/stylePresets.js
index 75fd330e..d2535a46 100644
--- a/modules/ui/stylePresets.js
+++ b/modules/ui/stylePresets.js
@@ -1,5 +1,4 @@
-"use strict";
-// UI module to control the style presets
+import {tip} from "/src/scripts/tooltips";
 
 const systemPresets = [
   "default",
diff --git a/modules/ui/temperature-graph.js b/modules/ui/temperature-graph.js
index 0b3ea567..a79f5d78 100644
--- a/modules/ui/temperature-graph.js
+++ b/modules/ui/temperature-graph.js
@@ -1,6 +1,6 @@
-"use strict";
+import {tip} from "/src/scripts/tooltips";
 
-function showBurgTemperatureGraph(id) {
+export function showBurgTemperatureGraph(id) {
   const b = pack.burgs[id];
   const lat = mapCoordinates.latN - (b.y / graphHeight) * mapCoordinates.latT;
   const burgTemp = grid.cells.temp[pack.cells.g[b.cell]];
@@ -48,7 +48,10 @@ function showBurgTemperatureGraph(id) {
   // Standard deviation for average temperature for the year from [0, 1] to [min, max]
   const yearSig = lstOut[0] * 62.9466411977018 + 0.28613807855649165;
   // Standard deviation for the difference between the minimum and maximum temperatures for the year
-  const yearDelTmpSig = lstOut[1] * 13.541688670361175 + 0.1414213562373084 > yearSig ? yearSig : lstOut[1] * 13.541688670361175 + 0.1414213562373084;
+  const yearDelTmpSig =
+    lstOut[1] * 13.541688670361175 + 0.1414213562373084 > yearSig
+      ? yearSig
+      : lstOut[1] * 13.541688670361175 + 0.1414213562373084;
   // Expected value for the difference between the minimum and maximum temperatures for the year
   const yearDelTmpMu = lstOut[2] * 15.266666666666667 + 0.6416666666666663;
 
@@ -67,7 +70,20 @@ function showBurgTemperatureGraph(id) {
   const year = new Date().getFullYear(); // use current year
   const startDate = new Date(year, 0, 1);
   const endDate = new Date(year, 11, 31);
-  const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+  const months = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December"
+  ];
 
   const xscale = d3.scaleTime().domain([startDate, endDate]).range([0, chartWidth]);
   const yscale = d3.scaleLinear().domain([minT, maxT]).range([chartHeight, 0]);
@@ -91,7 +107,11 @@ function showBurgTemperatureGraph(id) {
   });
 
   drawGraph();
-  $("#alert").dialog({title: "Annual temperature in " + b.name, width: "auto", position: {my: "center", at: "center", of: "svg"}});
+  $("#alert").dialog({
+    title: "Annual temperature in " + b.name,
+    width: "auto",
+    position: {my: "center", at: "center", of: "svg"}
+  });
 
   function drawGraph() {
     alertMessage.innerHTML = "";
@@ -109,11 +129,26 @@ function showBurgTemperatureGraph(id) {
     const legendX = n => (chartWidth * n) / 4;
     const legendTextX = n => legendX(n) + 10;
     legend.append("circle").attr("cx", legendX(1)).attr("cy", legendY).attr("r", 4).style("fill", "red");
-    legend.append("text").attr("x", legendTextX(1)).attr("y", legendY).attr("alignment-baseline", "central").text("Day temperature");
+    legend
+      .append("text")
+      .attr("x", legendTextX(1))
+      .attr("y", legendY)
+      .attr("alignment-baseline", "central")
+      .text("Day temperature");
     legend.append("circle").attr("cx", legendX(2)).attr("cy", legendY).attr("r", 4).style("fill", "orange");
-    legend.append("text").attr("x", legendTextX(2)).attr("y", legendY).attr("alignment-baseline", "central").text("Mean temperature");
+    legend
+      .append("text")
+      .attr("x", legendTextX(2))
+      .attr("y", legendY)
+      .attr("alignment-baseline", "central")
+      .text("Mean temperature");
     legend.append("circle").attr("cx", legendX(3)).attr("cy", legendY).attr("r", 4).style("fill", "blue");
-    legend.append("text").attr("x", legendTextX(3)).attr("y", legendY).attr("alignment-baseline", "central").text("Night temperature");
+    legend
+      .append("text")
+      .attr("x", legendTextX(3))
+      .attr("y", legendY)
+      .attr("alignment-baseline", "central")
+      .text("Night temperature");
 
     const xGrid = d3.axisBottom(xscale).ticks().tickSize(-chartHeight);
     const yGrid = d3.axisLeft(yscale).ticks(5).tickSize(-chartWidth);
@@ -146,9 +181,24 @@ function showBurgTemperatureGraph(id) {
     axis.select("path.domain").attr("d", `M0.5,0.5 H${chartWidth + 0.5}`);
 
     const curves = chart.append("g").attr("fill", "none").style("stroke-width", 2.5);
-    curves.append("path").attr("d", getCurve(tempMean)).attr("data-type", "daily").attr("stroke", "orange").on("mousemove", printVal);
-    curves.append("path").attr("d", getCurve(tempMin)).attr("data-type", "night").attr("stroke", "blue").on("mousemove", printVal);
-    curves.append("path").attr("d", getCurve(tempMax)).attr("data-type", "day").attr("stroke", "red").on("mousemove", printVal);
+    curves
+      .append("path")
+      .attr("d", getCurve(tempMean))
+      .attr("data-type", "daily")
+      .attr("stroke", "orange")
+      .on("mousemove", printVal);
+    curves
+      .append("path")
+      .attr("d", getCurve(tempMin))
+      .attr("data-type", "night")
+      .attr("stroke", "blue")
+      .on("mousemove", printVal);
+    curves
+      .append("path")
+      .attr("d", getCurve(tempMax))
+      .attr("data-type", "day")
+      .attr("stroke", "red")
+      .on("mousemove", printVal);
 
     function printVal() {
       const [x, y] = d3.mouse(this);
diff --git a/modules/ui/tools.js b/modules/ui/tools.js
index 534bb94a..5c70ed0d 100644
--- a/modules/ui/tools.js
+++ b/modules/ui/tools.js
@@ -1,7 +1,7 @@
 import {restoreDefaultEvents} from "/src/scripts/events";
 import {findCell} from "/src/utils/graphUtils";
 import {last} from "/src/utils/arrayUtils";
-import {clearMainTip} from "/src/scripts/tooltips";
+import {tip, clearMainTip} from "/src/scripts/tooltips";
 
 // module to control the Tools options (click to edit, to re-geenerate, tp add)
 
diff --git a/modules/ui/units-editor.js b/modules/ui/units-editor.js
index 08164353..4e94e03b 100644
--- a/modules/ui/units-editor.js
+++ b/modules/ui/units-editor.js
@@ -1,5 +1,6 @@
 import {restoreDefaultEvents} from "/src/scripts/events";
 import {findCell} from "/src/utils/graphUtils";
+import {tip} from "/src/scripts/tooltips";
 
 export function editUnits() {
   closeDialogs("#unitsEditor, .stable");
diff --git a/modules/ui/world-configurator.js b/modules/ui/world-configurator.js
index 76a91785..371bfab0 100644
--- a/modules/ui/world-configurator.js
+++ b/modules/ui/world-configurator.js
@@ -1,4 +1,6 @@
-function editWorld() {
+import {tip} from "/src/scripts/tooltips";
+
+export function editWorld() {
   if (customization) return;
   $("#worldConfigurator").dialog({
     title: "Configure World",
diff --git a/modules/ui/zones-editor.js b/modules/ui/zones-editor.js
index 1339c948..16d0ba2f 100644
--- a/modules/ui/zones-editor.js
+++ b/modules/ui/zones-editor.js
@@ -1,7 +1,7 @@
 import {restoreDefaultEvents} from "/src/scripts/events";
 import {findAll, findCell, getPackPolygon} from "/src/utils/graphUtils";
 import {unique} from "/src/utils/arrayUtils";
-import {showMainTip, clearMainTip} from "/src/scripts/tooltips";
+import {tip, showMainTip, clearMainTip} from "/src/scripts/tooltips";
 
 export function editZones() {
   closeDialogs();
diff --git a/src/main.ts b/src/main.ts
index 9b2b8d23..e0228015 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -20,7 +20,8 @@ import {Rulers, Ruler, drawScaleBar} from "./modules/measurers";
 import {byId} from "./utils/shorthands";
 import {addGlobalListeners} from "./scripts/listeners";
 import {restoreDefaultEvents} from "./scripts/events";
-import {clearMainTip} from "./scripts/tooltips";
+import {clearMainTip, tip} from "./scripts/tooltips";
+import {clearLegend} from "./modules/legend";
 import "./components";
 
 addGlobalListeners();
@@ -61,6 +62,10 @@ svgWidth = graphWidth;
 svgHeight = graphHeight;
 
 defineSvg(graphWidth, graphHeight);
+scaleBar.on("mousemove", () => tip("Click to open Units Editor")).on("click", () => editUnits());
+legend
+  .on("mousemove", () => tip("Drag to change the position. Click to hide the legend"))
+  .on("click", () => clearLegend());
 
 document.on("DOMContentLoaded", async () => {
   if (!location.hostname) {
diff --git a/src/scripts/events.ts b/src/scripts/events.ts
index a8370e82..e8b4924f 100644
--- a/src/scripts/events.ts
+++ b/src/scripts/events.ts
@@ -1,6 +1,6 @@
 import {dragLegendBox} from "../modules/legend";
 import {findCell, findGridCell} from "../utils/graphUtils";
-import {showMainTip} from "./tooltips";
+import {tip, showMainTip} from "./tooltips";
 
 export function restoreDefaultEvents() {
   Zoom.setZoomBehavior();
diff --git a/src/scripts/options/lock.ts b/src/scripts/options/lock.ts
index cd5ccb63..13243e5a 100644
--- a/src/scripts/options/lock.ts
+++ b/src/scripts/options/lock.ts
@@ -1,4 +1,5 @@
 import {store} from "../../utils/shorthands";
+import {tip} from "../tooltips";
 
 export function assignLockBehavior() {
   const $lockable = document.querySelectorAll("[data-locked]");