From c2640bcada12f596f53aa46a615d3d5c9bb2a505 Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Sat, 28 May 2022 22:27:29 +0300
Subject: [PATCH] tooltip - get shortcut from its own attribute

---
 index.css                                  |  14 ++
 index.html                                 | 179 ++++++++++++---------
 main.js                                    |   3 +
 modules/dynamic/editors/cultures-editor.js |   2 +-
 modules/dynamic/editors/states-editor.js   |   2 +-
 modules/ui/general.js                      |  29 ++--
 modules/ui/world-configurator.js           |  18 ++-
 7 files changed, 155 insertions(+), 92 deletions(-)

diff --git a/index.css b/index.css
index 419bf650..4d1a1f91 100644
--- a/index.css
+++ b/index.css
@@ -347,6 +347,20 @@ text.drag {
   user-select: none;
 }
 
+#optionsTrigger {
+  padding: 0.6em 0.45em;
+}
+
+@media (max-width: 600px) {
+  #optionsTrigger {
+    font-size: 2em;
+    padding: 0;
+    width: 1.3em;
+    height: 1.6em;
+    border: solid 1px #5e4fa2;
+  }
+}
+
 #options {
   position: absolute;
   font-family: Consolas, monospace;
diff --git a/index.html b/index.html
index a895ac77..d027e45c 100644
--- a/index.html
+++ b/index.html
@@ -288,17 +288,18 @@
         <button
           id="optionsTrigger"
           data-t="tipOptionsTrigger"
-          data-tip="Click to show the Menu. Shortcut: Tab"
+          data-tip="Click to show the Menu"
+          data-shortcut="Tab"
           class="options glow"
           onclick="showOptions(event)"
-          style="padding: 0.6em 0.45em"
         >
           ►
         </button>
         <button
           id="regenerate"
           data-t="tipRegenerate"
-          data-tip="Click to generate a new map. Shortcut: F2"
+          data-tip="Click to generate a new map"
+          data-shortcut="F2"
           onclick="regeneratePrompt()"
           class="options"
           style="display: none"
@@ -311,7 +312,14 @@
         <div class="drag-trigger" data-t="optionsDragTrigger" data-tip="Drag to move the Menu"></div>
 
         <div class="tab">
-          <button id="optionsHide" data-t="optionsHide" data-tip="Click to hide the Menu. Shortcut: Tab or Esc" class="options" onclick="hideOptions(event)">
+          <button
+            id="optionsHide"
+            data-t="optionsHide"
+            data-tip="Click to hide the Menu"
+            data-shortcut="Tab or Esc"
+            class="options"
+            onclick="hideOptions(event)"
+          >
             ◄
           </button>
           <button id="layersTab" data-t="layersTab" data-tip="Click to change map layers" class="options active"><t data-t="layers">Layers</t></button>
@@ -358,7 +366,8 @@
           <ul data-tip="Click to toggle a layer, drag to raise or lower a layer. Ctrl + click to edit layer style" id="mapLayers">
             <li
               id="toggleTexture"
-              data-tip="Texture overlay: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: X"
+              data-tip="Texture overlay: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
+              data-shortcut="X"
               class="buttonoff"
               onclick="toggleTexture(event)"
             >
@@ -366,7 +375,8 @@
             </li>
             <li
               id="toggleHeight"
-              data-tip="Heightmap: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: H"
+              data-tip="Heightmap: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
+              data-shortcut="H"
               class="buttonoff"
               onclick="toggleHeight(event)"
             >
@@ -374,7 +384,8 @@
             </li>
             <li
               id="toggleBiomes"
-              data-tip="Biomes: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: B"
+              data-tip="Biomes: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
+              data-shortcut="B"
               class="buttonoff"
               onclick="toggleBiomes(event)"
             >
@@ -382,7 +393,8 @@
             </li>
             <li
               id="toggleCells"
-              data-tip="Cells structure: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: E"
+              data-tip="Cells structure: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
+              data-shortcut="E"
               class="buttonoff"
               onclick="toggleCells(event)"
             >
@@ -390,7 +402,8 @@
             </li>
             <li
               id="toggleGrid"
-              data-tip="Grid: click to toggle, drag to raise or lower. Ctrl + click to edit layer style and select type. Shortcut: G"
+              data-tip="Grid: click to toggle, drag to raise or lower. Ctrl + click to edit layer style and select type"
+              data-shortcut="G"
               class="buttonoff"
               onclick="toggleGrid(event)"
             >
@@ -398,7 +411,8 @@
             </li>
             <li
               id="toggleCoordinates"
-              data-tip="Coordinate grid: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: O"
+              data-tip="Coordinate grid: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
+              data-shortcut="O"
               class="buttonoff"
               onclick="toggleCoordinates(event)"
             >
@@ -406,7 +420,8 @@
             </li>
             <li
               id="toggleCompass"
-              data-tip="Wind (Compass) Rose: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: W"
+              data-tip="Wind (Compass) Rose: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
+              data-shortcut="W"
               class="buttonoff"
               onclick="toggleCompass(event)"
             >
@@ -414,14 +429,16 @@
             </li>
             <li
               id="toggleRivers"
-              data-tip="Rivers: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: V"
+              data-tip="Rivers: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
+              data-shortcut="V"
               onclick="toggleRivers(event)"
             >
               Ri<u>v</u>ers
             </li>
             <li
               id="toggleRelief"
-              data-tip="Relief and biome icons: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: F"
+              data-tip="Relief and biome icons: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
+              data-shortcut="F"
               class="buttonoff"
               onclick="toggleRelief(event)"
             >
@@ -429,7 +446,8 @@
             </li>
             <li
               id="toggleReligions"
-              data-tip="Religions: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: R"
+              data-tip="Religions: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
+              data-shortcut="R"
               class="buttonoff"
               onclick="toggleReligions(event)"
             >
@@ -437,7 +455,8 @@
             </li>
             <li
               id="toggleCultures"
-              data-tip="Cultures: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: C"
+              data-tip="Cultures: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
+              data-shortcut="C"
               class="buttonoff"
               onclick="toggleCultures(event)"
             >
@@ -445,14 +464,16 @@
             </li>
             <li
               id="toggleStates"
-              data-tip="States: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: S"
+              data-tip="States: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
+              data-shortcut="S"
               onclick="toggleStates(event)"
             >
               <u>S</u>tates
             </li>
             <li
               id="toggleProvinces"
-              data-tip="Provinces: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: P"
+              data-tip="Provinces: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
+              data-shortcut="P"
               class="buttonoff"
               onclick="toggleProvinces(event)"
             >
@@ -460,7 +481,8 @@
             </li>
             <li
               id="toggleZones"
-              data-tip="Zones: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: Z"
+              data-tip="Zones: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
+              data-shortcut="Z"
               class="buttonoff"
               onclick="toggleZones(event)"
             >
@@ -468,21 +490,24 @@
             </li>
             <li
               id="toggleBorders"
-              data-tip="State borders: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: D"
+              data-tip="State borders: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
+              data-shortcut="D"
               onclick="toggleBorders(event)"
             >
               Bor<u>d</u>ers
             </li>
             <li
               id="toggleRoutes"
-              data-tip="Trade routes: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: U"
+              data-tip="Trade routes: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
+              data-shortcut="U"
               onclick="toggleRoutes(event)"
             >
               Ro<u>u</u>tes
             </li>
             <li
               id="toggleTemp"
-              data-tip="Temperature map: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: T"
+              data-tip="Temperature map: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
+              data-shortcut="T"
               class="buttonoff"
               onclick="toggleTemp(event)"
             >
@@ -490,7 +515,8 @@
             </li>
             <li
               id="togglePopulation"
-              data-tip="Population map: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: N"
+              data-tip="Population map: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
+              data-shortcut="N"
               class="buttonoff"
               onclick="togglePopulation(event)"
             >
@@ -498,7 +524,8 @@
             </li>
             <li
               id="toggleIce"
-              data-tip="Icebergs and glaciers: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: J"
+              data-tip="Icebergs and glaciers: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
+              data-shortcut="J"
               class="buttonoff"
               onclick="toggleIce(event)"
             >
@@ -506,7 +533,8 @@
             </li>
             <li
               id="togglePrec"
-              data-tip="Precipitation map: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: A"
+              data-tip="Precipitation map: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
+              data-shortcut="A"
               class="buttonoff"
               onclick="togglePrec(event)"
             >
@@ -514,7 +542,8 @@
             </li>
             <li
               id="toggleEmblems"
-              data-tip="Emblems: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: Y"
+              data-tip="Emblems: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
+              data-shortcut="Y"
               class="buttonoff"
               onclick="toggleEmblems(event)"
             >
@@ -522,21 +551,24 @@
             </li>
             <li
               id="toggleLabels"
-              data-tip="Labels: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: L"
+              data-tip="Labels: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
+              data-shortcut="L"
               onclick="toggleLabels(event)"
             >
               <u>L</u>abels
             </li>
             <li
               id="toggleIcons"
-              data-tip="Burg icons: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: I"
+              data-tip="Burg icons: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
+              data-shortcut="I"
               onclick="toggleIcons(event)"
             >
               <u>I</u>cons
             </li>
             <li
               id="toggleMilitary"
-              data-tip="Military forces: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: M"
+              data-tip="Military forces: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
+              data-shortcut="M"
               class="buttonoff"
               onclick="toggleMilitary(event)"
             >
@@ -544,7 +576,8 @@
             </li>
             <li
               id="toggleMarkers"
-              data-tip="Markers: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style. Shortcut: K"
+              data-tip="Markers: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
+              data-shortcut="K"
               class="buttonoff"
               onclick="toggleMarkers(event)"
             >
@@ -552,7 +585,8 @@
             </li>
             <li
               id="toggleRulers"
-              data-tip="Rulers: click to toggle, drag to move, click on label to delete. Ctrl + click to edit layer style. Shortcut: = (equal)"
+              data-tip="Rulers: click to toggle, drag to move, click on label to delete. Ctrl + click to edit layer style"
+              data-shortcut="= (equal sign)"
               class="buttonoff"
               onclick="toggleRulers(event)"
             >
@@ -560,7 +594,8 @@
             </li>
             <li
               id="toggleScaleBar"
-              data-tip="Scale Bar: click to toggle. Ctrl + click to edit style. Shortcut: / (slash)"
+              data-tip="Scale Bar: click to toggle. Ctrl + click to edit style"
+              data-shortcut="/ (slash sign)"
               onclick="toggleScaleBar(event)"
               class="solid"
             >
@@ -1676,27 +1711,27 @@
         <div id="toolsContent" class="tabcontent">
           <p>Click to configure:</p>
           <div>
-            <button id="editHeightmapButton" data-tip="Click to open Heightmap customization menu. Shortcut: Shift + H">Heightmap</button>
-            <button id="editBiomesButton" data-tip="Click to open Biomes Editor. Shortcut: Shift + B">Biomes</button>
-            <button id="editStatesButton" data-tip="Click to open States Editor. Shortcut: Shift + S">States</button>
-            <button id="editProvincesButton" data-tip="Click to open Provinces Editor. Shortcut: Shift + P">Provinces</button>
-            <button id="editDiplomacyButton" data-tip="Click to open Diplomatical relationships Editor. Shortcut: Shift + D">Diplomacy</button>
-            <button id="editCulturesButton" data-tip="Click to open Cultures Editor. Shortcut: Shift + C">Cultures</button>
-            <button id="editNamesBaseButton" data-tip="Click to open Namesbase Editor. Shortcut: Shift + N">Namesbase</button>
-            <button id="editZonesButton" data-tip="Click to open Zones Editor. Shortcut: Shift + Z">Zones</button>
-            <button id="editReligions" data-tip="Click to open Religions Editor. Shortcut: Shift + R">Religions</button>
-            <button id="editEmblemButton" data-tip="Click to open Emblem Editor. Shortcut: Shift + Y">Emblems</button>
-            <button id="editUnitsButton" data-tip="Click to open Units Editor. Shortcut: Shift + Q">Units</button>
-            <button id="editNotesButton" data-tip="Click to open Notes Editor. Shortcut: Shift + O">Notes</button>
+            <button id="editHeightmapButton" data-tip="Click to open Heightmap customization menu" data-shortcut="Shift + H">Heightmap</button>
+            <button id="editBiomesButton" data-tip="Click to open Biomes Editor" data-shortcut="Shift + B">Biomes</button>
+            <button id="editStatesButton" data-tip="Click to open States Editor" data-shortcut="Shift + S">States</button>
+            <button id="editProvincesButton" data-tip="Click to open Provinces Editor" data-shortcut="Shift + P">Provinces</button>
+            <button id="editDiplomacyButton" data-tip="Click to open Diplomatical relationships Editor" data-shortcut="Shift + D">Diplomacy</button>
+            <button id="editCulturesButton" data-tip="Click to open Cultures Editor" data-shortcut="Shift + C">Cultures</button>
+            <button id="editNamesBaseButton" data-tip="Click to open Namesbase Editor" data-shortcut="Shift + N">Namesbase</button>
+            <button id="editZonesButton" data-tip="Click to open Zones Editor" data-shortcut="Shift + Z">Zones</button>
+            <button id="editReligions" data-tip="Click to open Religions Editor" data-shortcut="Shift + R">Religions</button>
+            <button id="editEmblemButton" data-tip="Click to open Emblem Editor" data-shortcut="Shift + Y">Emblems</button>
+            <button id="editUnitsButton" data-tip="Click to open Units Editor" data-shortcut="Shift + Q">Units</button>
+            <button id="editNotesButton" data-tip="Click to open Notes Editor" data-shortcut="Shift + O">Notes</button>
           </div>
 
           <p>Click to overview:</p>
           <div>
-            <button id="overviewBurgsButton" data-tip="Click to open Burgs Overview. Shortcut: Shift + T">Burgs</button>
-            <button id="overviewRiversButton" data-tip="Click to open Rivers Overview. Shortcut: Shift + V">Rivers</button>
-            <button id="overviewMilitaryButton" data-tip="Click to open Military Forces Overview. Shortcut: Shift + M">Military</button>
-            <button id="overviewMarkersButton" data-tip="Click to open Markers Overview. Shortcut: Shift + K">Markers</button>
-            <button id="overviewCellsButton" data-tip="Click to open Cell details view. Shortcut: Shift + E">Cells</button>
+            <button id="overviewBurgsButton" data-tip="Click to open Burgs Overview" data-shortcut="Shift + T">Burgs</button>
+            <button id="overviewRiversButton" data-tip="Click to open Rivers Overview" data-shortcut="Shift + V">Rivers</button>
+            <button id="overviewMilitaryButton" data-tip="Click to open Military Forces Overview" data-shortcut="Shift + M">Military</button>
+            <button id="overviewMarkersButton" data-tip="Click to open Markers Overview" data-shortcut="Shift + K">Markers</button>
+            <button id="overviewCellsButton" data-tip="Click to open Cell details view" data-shortcut="Shift + E">Cells</button>
           </div>
 
           <p>Click to regenerate:</p>
@@ -1727,11 +1762,11 @@
 
           <p>Click to add:</p>
           <div id="addFeature">
-            <button id="addBurgTool" data-tip="Click on map to place a burg. Hold <kbd>Shift</kbd> to add multiple. Shortcut: Shift + 1">Burg</button>
-            <button id="addLabel" data-tip="Click on map to place label. Hold Shift to add multiple. Shortcut: Shift + 2">Label</button>
-            <button id="addRiver" data-tip="Click on map to place a river. Hold Shift to add multiple. Shortcut: Shift + 3">River</button>
-            <button id="addRoute" data-tip="Click on map to place a route. Shortcut: Shift + 4">Route</button>
-            <button id="addMarker" data-tip="Click on map to place a marker. Hold Shift to add multiple. Shortcut: Shift + 5">Marker</button>
+            <button id="addBurgTool" data-tip="Click on map to place a burg. Hold Shift to add multiple" data-shortcut="Shift + 1">Burg</button>
+            <button id="addLabel" data-tip="Click on map to place label. Hold Shift to add multiple" data-shortcut="Shift + 2">Label</button>
+            <button id="addRiver" data-tip="Click on map to place a river. Hold Shift to add multiple" data-shortcut="Shift + 3">River</button>
+            <button id="addRoute" data-tip="Click on map to place a route" data-shortcut="Shift + 4">Route</button>
+            <button id="addMarker" data-tip="Click on map to place a marker. Hold Shift to add multiple" data-shortcut="Shift + 5">Marker</button>
           </div>
 
           <p>Click to create a new map:</p>
@@ -1879,11 +1914,11 @@
         </div>
 
         <div id="sticked">
-          <button id="newMapButton" data-tip="Generate a new map based on options. Shortcut: F2">New Map</button>
+          <button id="newMapButton" data-tip="Generate a new map based on options" data-shortcut="F2">New Map</button>
           <button id="exportButton" data-tip="Select format to download image or export map data">Export</button>
           <button id="saveButton" data-tip="Save fully-functional map in .map format">Save</button>
           <button id="loadButton" data-tip="Load fully-functional map in .map format">Load</button>
-          <button id="zoomReset" data-tip="Reset map zoom. Shortcut: 0">Reset Zoom</button>
+          <button id="zoomReset" data-tip="Reset map zoom" data-shortcut="0 (zero)">Reset Zoom</button>
         </div>
       </div>
     </div>
@@ -2039,7 +2074,7 @@
 
         <button id="labelAlign" data-tip="Turn text path into a straight line" class="icon-resize-horizontal"></button>
         <button id="labelLegend" data-tip="Edit free text notes (legend) for this label" class="icon-edit"></button>
-        <button id="labelRemoveSingle" data-tip="Remove the label. Shortcut: Delete" class="icon-trash fastDelete"></button>
+        <button id="labelRemoveSingle" data-tip="Remove the label" data-shortcut="Delete" class="icon-trash fastDelete"></button>
       </div>
 
       <div id="riverEditor" class="dialog" style="display: none">
@@ -2098,7 +2133,7 @@
           <button id="riverEditStyle" data-tip="Edit style for all rivers in Style Editor" class="icon-brush"></button>
           <button id="riverElevationProfile" data-tip="Show the elevation profile for the river" class="icon-chart-area"></button>
           <button id="riverLegend" data-tip="Edit free text notes (legend) for the river" class="icon-edit"></button>
-          <button id="riverRemove" data-tip="Remove river. Shortcut: Delete" class="icon-trash fastDelete"></button>
+          <button id="riverRemove" data-tip="Remove river" data-shortcut="Delete" class="icon-trash fastDelete"></button>
         </div>
       </div>
 
@@ -2219,7 +2254,7 @@
         <button id="routeSplit" data-tip="Click on a control point to split the route" class="icon-unlink"></button>
         <button id="routeLegend" data-tip="Edit free text notes (legend) for the route" class="icon-edit"></button>
         <button id="routeNew" data-tip="Create new route clicking on map" class="icon-map-pin"></button>
-        <button id="routeRemove" data-tip="Remove route. Shortcut: Delete" class="icon-trash fastDelete"></button>
+        <button id="routeRemove" data-tip="Remove route" data-shortcut="Delete" class="icon-trash fastDelete"></button>
       </div>
 
       <div id="iceEditor" class="dialog" style="display: none">
@@ -2227,7 +2262,7 @@
         <button id="iceRandomize" data-tip="Randomize Iceberg shape" class="icon-shuffle"></button>
         <input id="iceSize" data-tip="Change Iceberg size" type="range" min=".05" max="1" step=".01" />
         <button id="iceNew" data-tip="Add an Iceberg (click on map)" class="icon-plus"></button>
-        <button id="iceRemove" data-tip="Remove the element. Shortcut: Delete" class="icon-trash fastDelete"></button>
+        <button id="iceRemove" data-tip="Remove the element" data-shortcut="Delete" class="icon-trash fastDelete"></button>
       </div>
 
       <div id="coastlineEditor" class="dialog" style="display: none">
@@ -2414,7 +2449,7 @@
           <button id="reliefCopy" data-tip="Copy selected relief icon" class="icon-clone"></button>
           <button id="reliefMoveFront" data-tip="Move selected relief icon to front" class="icon-level-up"></button>
           <button id="reliefMoveBack" data-tip="Move selected relief icon back" class="icon-level-down"></button>
-          <button id="reliefRemove" data-tip="Remove selected relief icon or icon type. Shortcut: Delete" class="icon-trash fastDelete"></button>
+          <button id="reliefRemove" data-tip="Remove selected relief icon or icon type" data-shortcut="Delete" class="icon-trash fastDelete"></button>
         </div>
       </div>
 
@@ -2560,7 +2595,7 @@
           <button id="burgRelocate" data-tip="Relocate burg" class="icon-target"></button>
           <button id="burglLegend" data-tip="Edit free text notes (legend) for this burg" class="icon-edit"></button>
           <button id="burgLock" class="icon-lock-open" onmouseover="showElementLockTip(event)"></button>
-          <button id="burgRemove" data-tip="Remove non-capital burg. Shortcut: Delete" class="icon-trash fastDelete"></button>
+          <button id="burgRemove" data-tip="Remove non-capital burg" data-shortcut="Delete" class="icon-trash fastDelete"></button>
         </div>
       </div>
 
@@ -2619,7 +2654,7 @@
           <button id="markerNotes" data-tip="Edit place legend (notes)" class="icon-edit"></button>
           <button id="markerLock" class="icon-lock-open" onmouseover="showElementLockTip(event)"></button>
           <button id="markerAdd" data-tip="Add additional marker of that type" class="icon-plus"></button>
-          <button id="markerRemove" data-tip="Remove the marker. Shortcut: Delete" class="icon-trash fastDelete"></button>
+          <button id="markerRemove" data-tip="Remove the marker" data-shortcut="Delete" class="icon-trash fastDelete"></button>
         </div>
       </div>
 
@@ -2648,7 +2683,7 @@
           <button id="regimentAttach" data-tip="Attach regiment to another one (include this regiment to another one)" class="icon-attach"></button>
           <button id="regimentRegenerateLegend" data-tip="Regenerate legend for this regiment" class="icon-retweet"></button>
           <button id="regimentLegend" data-tip="Edit free text notes (legend) for this regiment" class="icon-edit"></button>
-          <button id="regimentRemove" data-tip="Remove regiment. Shortcut: Delete" class="icon-trash fastDelete"></button>
+          <button id="regimentRemove" data-tip="Remove regiment" data-shortcut="Delete" class="icon-trash fastDelete"></button>
         </div>
       </div>
 
@@ -2863,7 +2898,7 @@
         </div>
 
         <div id="brushesSliders" style="display: none">
-          <div data-tip="Change brush size. Shortcut: + (increase), – (decrease)" style="padding-bottom: 1px">
+          <div data-tip="Change brush size" data-shortcut="+ (increase), – (decrease)" style="padding-bottom: 1px">
             <div style="width: 3.2em; display: inline-block"><i>Radius:</i></div>
             <input id="brushRadius" oninput="tip('Brush radius: '+this.value); brushRadiusNumber.value = this.value" type="range" min="1" max="99" value="25" />
             <input
@@ -3058,7 +3093,7 @@
           <button id="biomesPercentage" data-tip="Toggle percentage / absolute values views" class="icon-percent"></button>
           <button id="biomesManually" data-tip="Manually re-assign biomes to not follow the default moisture/temperature pattern" class="icon-brush"></button>
           <div id="biomesManuallyButtons" style="display: none">
-            <label data-tip="Change brush size. Shortcut: + (increase), – (decrease)" class="italic"
+            <label data-tip="Change brush size" data-shortcut="+ (increase), – (decrease)" class="italic"
               >Brush radius:
               <input
                 id="biomesManuallyBrush"
@@ -3226,7 +3261,7 @@
 
           <button id="provincesManually" data-tip="Manually re-assign provinces" class="icon-brush"></button>
           <div id="provincesManuallyButtons" style="display: none">
-            <label data-tip="Change brush size. Shortcut: + (increase), – (decrease)" class="italic"
+            <label data-tip="Change brush size" data-shortcut="+ (increase), – (decrease)" class="italic"
               >Brush size:
               <input
                 id="provincesManuallyBrush"
@@ -3429,7 +3464,7 @@
 
           <button id="zonesManually" data-tip="Re-assign zones" class="icon-brush"></button>
           <div id="zonesManuallyButtons" style="display: none">
-            <label data-tip="Change brush size. Shortcut: + (increase), – (decrease)" class="italic"
+            <label data-tip="Change brush size" data-shortcut="+ (increase), – (decrease)" class="italic"
               >Brush:
               <input
                 id="zonesBrush"
@@ -3451,7 +3486,7 @@
             ><br />
             <button id="zonesManuallyApply" data-tip="Apply assignment" class="icon-check"></button>
             <button id="zonesManuallyCancel" data-tip="Cancel assignment" class="icon-cancel"></button>
-            <button id="zonesRemove" data-tip="Click to toggle the removal mode on brush dragging. Shortcut: ctrl" class="icon-eraser"></button>
+            <button id="zonesRemove" data-tip="Click to toggle the removal mode on brush dragging" data-shortcut="Ctrl" class="icon-eraser"></button>
           </div>
 
           <button id="zonesAdd" data-tip="Add new zone layer" class="icon-plus"></button>
@@ -3512,7 +3547,7 @@
 
           <button id="religionsManually" data-tip="Manually re-assign religions" class="icon-brush"></button>
           <div id="religionsManuallyButtons" style="display: none">
-            <label data-tip="Change brush size. Shortcut: + (increase), – (decrease)" class="italic"
+            <label data-tip="Change brush size" data-shortcut="+ (increase), – (decrease)" class="italic"
               >Brush size:
               <input
                 id="religionsManuallyBrush"
@@ -4212,9 +4247,9 @@
       <div id="saveMapData" style="display: none" class="dialog">
         <div style="margin-top: 0.3em">
           <strong>Save map to</strong>
-          <button onclick="dowloadMap()" data-tip="Download .map file to your local disk. Shortcut: Ctrl + S">machine</button>
-          <button onclick="saveToDropbox()" data-tip="Save .map file to your Dropbox. Shortcut: Ctrl + C">dropbox</button>
-          <button onclick="quickSave()" data-tip="Save the project to browser storage. It can be unreliable. Shortcut: F6">browser</button>
+          <button onclick="dowloadMap()" data-tip="Download .map file to your local disk" data-shortcut="Ctrl + S">machine</button>
+          <button onclick="saveToDropbox()" data-tip="Save .map file to your Dropbox" data-shortcut="Ctrl + C">dropbox</button>
+          <button onclick="quickSave()" data-tip="Save the project to browser storage. It can be unreliable" data-shortcut="F6">browser</button>
         </div>
         <p>
           Maps are saved in <i>.map</i> format, that can be loaded back via the <i>Load</i> in menu. There is no way to restore the progress if file is lost.
diff --git a/main.js b/main.js
index b62b6cfd..cbd67e94 100644
--- a/main.js
+++ b/main.js
@@ -10,6 +10,9 @@ const TIME = DEBUG || !PRODUCTION;
 const WARN = true;
 const ERROR = true;
 
+// detect device
+const MOBILE = window.innerWidth < 600 || navigator.userAgentData?.mobile;
+
 if (PRODUCTION && "serviceWorker" in navigator) {
   window.addEventListener("load", () => {
     navigator.serviceWorker.register("./sw.js").catch(err => {
diff --git a/modules/dynamic/editors/cultures-editor.js b/modules/dynamic/editors/cultures-editor.js
index 90aa6f33..b3003584 100644
--- a/modules/dynamic/editors/cultures-editor.js
+++ b/modules/dynamic/editors/cultures-editor.js
@@ -51,7 +51,7 @@ function insertEditorHtml() {
       <button id="culturesHeirarchy" data-tip="Show cultures hierarchy tree" class="icon-sitemap"></button>
       <button id="culturesManually" data-tip="Manually re-assign cultures" class="icon-brush"></button>
       <div id="culturesManuallyButtons" style="display: none">
-        <label data-tip="Change brush size. Shortcut: + (increase), – (decrease)" class="italic">Brush size:
+        <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"
diff --git a/modules/dynamic/editors/states-editor.js b/modules/dynamic/editors/states-editor.js
index 64244cb0..44dc59fa 100644
--- a/modules/dynamic/editors/states-editor.js
+++ b/modules/dynamic/editors/states-editor.js
@@ -89,7 +89,7 @@ function insertEditorHtml() {
 
       <button id="statesManually" data-tip="Manually re-assign states" class="icon-brush"></button>
       <div id="statesManuallyButtons" style="display: none">
-        <label data-tip="Change brush size. Shortcut: + (increase), – (decrease)" class="italic"
+        <label data-tip="Change brush size" data-shortcut="+ (increase), – (decrease)" class="italic"
           >Brush size:
           <input
             id="statesManuallyBrush"
diff --git a/modules/ui/general.js b/modules/ui/general.js
index 0d0fde7b..1b63dbac 100644
--- a/modules/ui/general.js
+++ b/modules/ui/general.js
@@ -21,18 +21,22 @@ document.getElementById("dialogs").addEventListener("mousemove", showDataTip);
 document.getElementById("optionsContainer").addEventListener("mousemove", showDataTip);
 document.getElementById("exitCustomization").addEventListener("mousemove", showDataTip);
 
-function tip(tip = "Tip is undefined", main, type, time) {
+const tipBackgroundMap = {
+  info: "linear-gradient(0.1turn, #ffffff00, #5e5c5c80, #ffffff00)",
+  success: "linear-gradient(0.1turn, #ffffff00, #127912cc, #ffffff00)",
+  warn: "linear-gradient(0.1turn, #ffffff00, #be5d08cc, #ffffff00)",
+  error: "linear-gradient(0.1turn, #ffffff00, #e11d1dcc, #ffffff00)"
+};
+
+function tip(tip = "Tip is undefined", main = false, type = "info", time = 0) {
   tooltip.innerHTML = tip;
-  tooltip.style.background = "linear-gradient(0.1turn, #ffffff00, #5e5c5c80, #ffffff00)";
-  if (type === "error") tooltip.style.background = "linear-gradient(0.1turn, #ffffff00, #e11d1dcc, #ffffff00)";
-  else if (type === "warn") tooltip.style.background = "linear-gradient(0.1turn, #ffffff00, #be5d08cc, #ffffff00)";
-  else if (type === "success") tooltip.style.background = "linear-gradient(0.1turn, #ffffff00, #127912cc, #ffffff00)";
+  tooltip.style.background = tipBackgroundMap[type];
 
   if (main) {
     tooltip.dataset.main = tip;
     tooltip.dataset.color = tooltip.style.background;
   }
-  if (time) setTimeout(() => clearMainTip(), time);
+  if (time) setTimeout(clearMainTip, time);
 }
 
 function showMainTip() {
@@ -47,11 +51,16 @@ function clearMainTip() {
 }
 
 // show tip at the bottom of the screen, consider possible translation
-function showDataTip(e) {
-  if (!e.target) return;
-  let dataTip = e.target.dataset.tip;
-  if (!dataTip && e.target.parentNode.dataset.tip) dataTip = e.target.parentNode.dataset.tip;
+function showDataTip(event) {
+  if (!event.target) return;
+
+  let dataTip = event.target.dataset.tip;
+  if (!dataTip && event.target.parentNode.dataset.tip) dataTip = event.target.parentNode.dataset.tip;
   if (!dataTip) return;
+
+  const shortcut = event.target.dataset.shortcut;
+  if (shortcut && !MOBILE) dataTip += `. Shortcut: ${shortcut}`;
+
   //const tooltip = lang === "en" ? dataTip : translate(e.target.dataset.t || e.target.parentNode.dataset.t, dataTip);
   tip(dataTip);
 }
diff --git a/modules/ui/world-configurator.js b/modules/ui/world-configurator.js
index 6fbc117a..73a3621e 100644
--- a/modules/ui/world-configurator.js
+++ b/modules/ui/world-configurator.js
@@ -73,16 +73,16 @@ function editWorld() {
     const eqD = ((graphHeight / 2) * 100) / size;
 
     calculateMapCoordinates();
-    const mc = mapCoordinates; // shortcut
-    const scale = +distanceScaleInput.value,
-      unit = distanceUnitInput.value;
+    const mc = mapCoordinates;
+    const scale = +distanceScaleInput.value;
+    const unit = distanceUnitInput.value;
     const meridian = toKilometer(eqD * 2 * scale);
-    document.getElementById("mapSize").innerHTML = /* html */ `${graphWidth}x${graphHeight}`;
-    document.getElementById("mapSizeFriendly").innerHTML = /* html */ `${rn(graphWidth * scale)}x${rn(graphHeight * scale)} ${unit}`;
+    document.getElementById("mapSize").innerHTML = `${graphWidth}x${graphHeight}`;
+    document.getElementById("mapSizeFriendly").innerHTML = `${rn(graphWidth * scale)}x${rn(graphHeight * scale)} ${unit}`;
     document.getElementById("meridianLength").innerHTML = rn(eqD * 2);
-    document.getElementById("meridianLengthFriendly").innerHTML = /* html */ `${rn(eqD * 2 * scale)} ${unit}`;
+    document.getElementById("meridianLengthFriendly").innerHTML = `${rn(eqD * 2 * scale)} ${unit}`;
     document.getElementById("meridianLengthEarth").innerHTML = meridian ? " = " + rn(meridian / 200) + "%🌏" : "";
-    document.getElementById("mapCoordinates").innerHTML = /* html */ `${lat(mc.latN)} ${Math.abs(rn(mc.lonW))}°W; ${lat(mc.latS)} ${rn(mc.lonE)}°E`;
+    document.getElementById("mapCoordinates").innerHTML = `${lat(mc.latN)} ${Math.abs(rn(mc.lonW))}°W; ${lat(mc.latS)} ${rn(mc.lonE)}°E`;
 
     function toKilometer(v) {
       if (unit === "km") return v;
@@ -92,9 +92,11 @@ function editWorld() {
       return 0; // 0 if distanceUnitInput is a custom unit
     }
 
+    // parse latitude value
     function lat(lat) {
       return lat > 0 ? Math.abs(rn(lat)) + "°N" : Math.abs(rn(lat)) + "°S";
-    } // parse latitude value
+    }
+
     const area = d3.geoGraticule().extent([
       [mc.lonW, mc.latN],
       [mc.lonE, mc.latS]