speed disclaimer

src/components/tabs/StockListTab.vue

@@ -99,7 +99,8 @@
         }}</span
         >) - {{ $t('stocklist.length') }}:
         <span class="text--accent">{{ store.totalLength }}m</span>
-        - {{ $t('stocklist.vmax') }}:
+        - {{ $t('stocklist.vmax') }}
+        <span tabindex="0" :data-tooltip="$t('stocklist.disclaimer')">(?)</span>:
         <span class="text--accent">{{ store.maxStockSpeed }} km/h</span>
       </span>
     </div>

src/locales/en.json

@@ -47,6 +47,7 @@
   },
   "stocklist": {
     "title": "STOCK EDITOR",
+    "disclaimer": "Theorethical value based on vehicles maximum speed in the current composition. It may be inaccurate in relation to the correct operational speed in certain configurations.",
     "alert-copied": "The rolling stock has been copied to your clipboard!",
     "alert-empty": "Lista pojazdów jest pusta!",
     "prompt-file": "Name a file and download it to the Presets folder (Documents/TTSK/TrainDriver2):",

src/locales/pl.json

@@ -47,6 +47,7 @@
   },
   "stocklist": {
     "title": "EDYTOR SKŁADU",
+    "disclaimer": "Wartość poglądowa wzorowana na prędkościach maksymalnych poszczególnych pojazdów w zestawieniu. Może nie zgadzać się z prawdziwymi prędkościami eksploatacyjnymi w konkretnych konfiguracjach.",
     "alert-copied": "Skład został skopiowany do twojego schowka!",
     "alert-empty": "Lista pojazdów jest pusta!",
     "prompt-file": "Nazwij plik, a następnie pobierz do folderu Presets (Dokumenty/TTSK/TrainDriver2):",

src/styles/global.scss

@@ -114,6 +114,23 @@ button {
   }
 }
 
+[data-tooltip]:hover::after,
+[data-tooltip]:focus::after {
+  position: absolute;
+  transform: translateX(10px);
+
+  content: attr(data-tooltip);
+  color: white;
+  background: black;
+  padding: 0.5em;
+  max-width: 300px;
+  z-index: 100;
+}
+
+[data-tooltip] {
+  cursor: pointer;
+}
+
 .btn {
   padding: 0.4em 0.75em;