add tooltips to most UI elements

src/App.vue

@@ -6,7 +6,7 @@ import Loading from "./misc/Loading.vue";
 import ModelViewerOverlay from "./viewer/ModelViewerOverlay.vue";
 import Tools from "./tools/Tools.vue";
 import Models from "./models/Models.vue";
-import {VLayout, VMain, VToolbarTitle} from "vuetify/lib/components";
+import {VLayout, VMain, VToolbarTitle, VTooltip, VBtn} from "vuetify/lib/components";
 import {settings} from "./misc/settings";
 import {NetworkManager, NetworkUpdateEvent} from "./misc/network";
 import {SceneMgr} from "./misc/scene";

src/index.ts

@@ -22,4 +22,5 @@ app.use(vuetify)
 app.mount('body')
 
 // Start non-blocking loading of Vuetify styles
-import('vuetify/lib/styles/main.sass');
+// @ts-ignore
+import('vuetify/dist/vuetify.css');

src/models/Models.vue

@@ -4,7 +4,7 @@ import {VExpansionPanel, VExpansionPanels, VExpansionPanelText, VExpansionPanelT
 
 <template>
   <v-expansion-panels>
-    <v-expansion-panel key="model-id" >
+    <v-expansion-panel key="model-id">
       <v-expansion-panel-title>? F ? E ? V | Model Name</v-expansion-panel-title>
       <v-expansion-panel-text>Content</v-expansion-panel-text>
     </v-expansion-panel>
@@ -17,4 +17,14 @@ import {VExpansionPanel, VExpansionPanels, VExpansionPanelText, VExpansionPanelT
 .v-expansion-panel-title--active + .v-expansion-panel-text {
   display: flex !important;
 }
+</style>
+
+<style>
+.mdi-chevron-down, .mdi-menu-down { /* HACK: mdi is not fully imported, only required icons... */
+  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M7 10l5 5 5-5H7z"/></svg>');
+}
+
+.v-overlay--active > .v-overlay__content {
+  display: block !important; /* HACK: Fix buggy tooltips not showing? */
+}
 </style>

src/tools/Selection.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {defineModel, ref} from "vue";
-import {VBtn, VSelect} from "vuetify/lib/components";
+import {VBtn, VSelect, VTooltip} from "vuetify/lib/components";
 import SvgIcon from '@jamescoyle/vue-icon/lib/svg-icon.vue';
 import type {ModelViewerElement} from '@google/model-viewer';
 import type {ModelScene} from "@google/model-viewer/lib/three-components/ModelScene";
@@ -128,9 +128,16 @@ function toggleSelection() {
 <template>
   <div class="select-parent">
     <v-btn icon @click="toggleSelection" :variant="selectionEnabled ? 'tonal' : 'elevated'">
+      <v-tooltip activator="parent">{{ selectionEnabled ? 'Disable Selection Mode' : 'Enable Selection Mode' }}
+      </v-tooltip>
       <svg-icon type="mdi" :path="mdiCursorDefaultClick"/>
     </v-btn>
-    <v-select class="select-only" variant="underlined" :items="['Faces', 'Edges', 'Vertices']" v-model="selectFilter"/>
+    <v-tooltip :text="'Select Only '  + selectFilter" :open-on-click="false">
+      <template v-slot:activator="{ props }">
+        <v-select v-bind="props" class="select-only" variant="underlined" :items="['Faces', 'Edges', 'Vertices']"
+                  v-model="selectFilter"/>
+      </template>
+    </v-tooltip>
   </div>
 </template>
 
@@ -151,10 +158,4 @@ function toggleSelection() {
   position: relative;
   top: -12px;
 }
-</style>
-
-<style>
-.mdi-chevron-down, .mdi-menu-down { /* HACK: mdi is not fully imported, only required icons... */
-  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M7 10l5 5 5-5H7z"/></svg>');
-}
 </style>

src/tools/Tools.vue

@@ -100,23 +100,29 @@ async function openGithub() {
   <v-divider/>
   <h5>Camera</h5>
   <v-btn icon @click="toggleProjection"><span class="icon-detail">{{ toggleProjectionText }}</span>
+    <v-tooltip activator="parent">Toggle Projection<br/>(currently
+      {{ toggleProjectionText === 'PERSP' ? 'perspective' : 'orthographic' }})
+    </v-tooltip>
     <svg-icon type="mdi" :path="mdiProjector"></svg-icon>
   </v-btn>
   <v-btn icon @click="centerCamera">
+    <v-tooltip activator="parent">Recenter Camera</v-tooltip>
     <svg-icon type="mdi" :path="mdiCrosshairsGps"/>
   </v-btn>
   <v-divider/>
-  <h5>Selection ({{ selection.filter((s) => s.face).length }}F {{ selection.filter((s) => !s.face).length }}E)</h5>
+  <h5>Selection ({{ selection.filter((s) => s.face).length }}F {{ selection.filter((s) => !s.face).length }}E ?V)</h5>
   <selection-component :viewer="props.refSData.viewer" :scene="props.refSData.viewerScene" v-model="selection"/>
   <v-divider/>
   <v-spacer></v-spacer>
   <h5>Extras</h5>
   <v-btn icon @click="downloadSceneGlb">
+    <v-tooltip activator="parent">Download Scene</v-tooltip>
     <svg-icon type="mdi" :path="mdiDownload"/>
   </v-btn>
   <v-dialog id="licenses-dialog" fullscreen>
     <template v-slot:activator="{ props }">
       <v-btn icon v-bind="props">
+        <v-tooltip activator="parent">Show Licenses</v-tooltip>
         <svg-icon type="mdi" :path="mdiLicense"/>
       </v-btn>
     </template>
@@ -136,14 +142,10 @@ async function openGithub() {
       </v-card>
     </template>
   </v-dialog>
-  <v-tooltip text="Tooltip">
+  <v-btn icon @click="openGithub">
-    <template v-slot:activator="{ props }">
+    <v-tooltip activator="parent">Open GitHub</v-tooltip>
-      <v-btn v-bind="props" icon @click="openGithub">
+    <svg-icon type="mdi" :path="mdiGithub"/>
-        <svg-icon type="mdi" :path="mdiGithub"/>
+  </v-btn>
-      </v-btn>
-    </template>
-  </v-tooltip>
-  <!-- TODO: Tooltips for ALL tools -->
 </template>
 
 <!--suppress CssUnusedSymbol -->