add tooltips.

client/src/components/RoomActionBtn.vue

@@ -1,5 +1,10 @@
 <template>
-  <v-btn v-if="tmpl" @click="Action" :color="tmpl.color" :disabled="disabled" :loading="loading" icon><v-icon>{{ tmpl.icon }}</v-icon></v-btn>
+  <v-tooltip bottom v-if="tmpl" open-delay="300">
+    <template v-slot:activator="{ on, attrs }">
+      <v-btn v-bind="attrs" v-on="on" @click="Action" :color="tmpl.color" :disabled="disabled" :loading="loading" icon><v-icon>{{ tmpl.icon }}</v-icon></v-btn>
+    </template>
+    <span>{{ tmpl.tooltip }}</span>
+  </v-tooltip>
 </template>
 
 <script lang="ts">
@@ -20,6 +25,7 @@ export default class RoomActionBtn extends Vue {
         return {
           dispatch: 'ROOMS_START',
           msg: 'Room started!',
+          tooltip: 'Start',
           color: 'green',
           icon: 'mdi-play-circle-outline',
         }
@@ -27,6 +33,7 @@ export default class RoomActionBtn extends Vue {
         return {
           dispatch: 'ROOMS_STOP',
           msg: 'Room stopped!',
+          tooltip: 'Stop',
           color: 'warning',
           icon: 'mdi-stop-circle-outline',
         }
@@ -34,6 +41,7 @@ export default class RoomActionBtn extends Vue {
         return {
           dispatch: 'ROOMS_RESTART',
           msg: 'Room restarted!',
+          tooltip: 'Restart',
           color: 'blue',
           icon: 'mdi-refresh',
         }
@@ -41,6 +49,7 @@ export default class RoomActionBtn extends Vue {
         return {
           dispatch: 'ROOMS_REMOVE',
           msg: 'Room removed!',
+          tooltip: 'Remove',
           color: 'red',
           icon: 'mdi-trash-can-outline',
         }

client/src/components/RoomsList.vue

@@ -9,15 +9,30 @@
       hide-default-footer
     >
       <template v-slot:[`item.url`]="{ item }">
-        <v-btn @click="roomId = item.id; dialog = true" color="blue" small class="mr-2"> <v-icon small>mdi-information-outline</v-icon></v-btn>
-        <v-btn :disabled="!item.running" :href="item.url" target="_blank" small> <v-icon small>mdi-open-in-new</v-icon></v-btn>
+        <v-tooltip bottom open-delay="300">
+          <template v-slot:activator="{ on, attrs }">
+            <v-btn v-bind="attrs" v-on="on" @click="roomId = item.id; dialog = true" color="blue" small class="mr-2"> <v-icon small>mdi-information-outline</v-icon></v-btn>
+          </template>
+          <span>View more information</span>
+        </v-tooltip>
+        <v-tooltip bottom open-delay="300">
+          <template v-slot:activator="{ on, attrs }">
+            <v-btn v-bind="attrs" v-on="on" :disabled="!item.running" :href="item.url" target="_blank" small> <v-icon small>mdi-open-in-new</v-icon></v-btn>
+          </template>
+          <span>Link to deployment</span>
+        </v-tooltip>
       </template>
       <template v-slot:[`item.max_connections`]="{ item }">
         <span v-if="item.max_connections">{{ item.max_connections }}</span>
         <i v-else>--not-specified--</i>
       </template>
       <template v-slot:[`item.status`]="{ item }">
-        <v-btn @click="Reload(item.id)" :loading="roomLoading.includes(item.id)" class="mr-3" color="green" icon><v-icon>mdi-refresh</v-icon></v-btn>
+        <v-tooltip bottom open-delay="300">
+          <template v-slot:activator="{ on, attrs }">
+            <v-btn v-bind="attrs" v-on="on" @click="Reload(item.id)" :loading="roomLoading.includes(item.id)" class="mr-3" color="green" icon><v-icon>mdi-refresh</v-icon></v-btn>
+          </template>
+          <span>Refresh data</span>
+        </v-tooltip>
         <v-chip :color="item.running ? 'green' : 'red'" dark small> {{ item.status }} </v-chip>
       </template>
       <template v-slot:[`item.created`]="{ item }">