Added tooltip

web/src/components/signalStrength.vue

@@ -1,21 +1,29 @@
 <template>
-  <span class="signal-strength">
-    <template v-if="value < 0">
-      <v-chip :color="signalStrengthColor(value) + ' lighten-5'" small>
-        <v-icon small left :color="signalStrengthColor(value) + ' darken-2'">
-          {{ signalStrengthIcon(value) }}
-        </v-icon>
-        <span class="font-weight-medium">{{ value }}</span>
-        <small class="ml-1"> dBm </small>
-      </v-chip>
+  <v-tooltip left :color="signalStrengthColor(value)" open-delay="400">
+    <template #activator="{ on, attrs }">
+      <template v-if="value < 0">
+        <v-chip
+          :color="signalStrengthColor(value) + ' lighten-5'"
+          small
+          v-bind="attrs"
+          v-on="on"
+        >
+          <v-icon small left :color="signalStrengthColor(value) + ' darken-2'">
+            {{ signalStrengthIcon(value) }}
+          </v-icon>
+          <span class="font-weight-medium">{{ value }}</span>
+          <small class="ml-1"> dBm </small>
+        </v-chip>
+      </template>
+      <template v-else>
+        <v-chip small color="grey lighten-4">
+          <v-icon small left color="grey">mdi-signal-off</v-icon>
+          <small>Aguarde...</small>
+        </v-chip>
+      </template>
     </template>
-    <template v-else>
-      <v-chip small color="grey lighten-4">
-        <v-icon small left color="grey">mdi-signal-off</v-icon>
-        <small>Aguarde...</small>
-      </v-chip>
-    </template>
-  </span>
+    <span>{{ signalStrengthText(value) }}</span>
+  </v-tooltip>
 </template>
 
 <script>
@@ -41,6 +49,15 @@ export default {
       else if (signalStrength > -80) return 'orange'
       else if (signalStrength > -90) return 'deep-orange'
       else return 'red'
+    },
+    signalStrengthText(signalStrength) {
+      if (signalStrength > -50) return 'Excelente'
+      else if (signalStrength > -60) return 'Bom'
+      else if (signalStrength > -67) return 'Regular'
+      else if (signalStrength > -70) return 'Fraco'
+      else if (signalStrength > -80) return 'Conexão instável'
+      else if (signalStrength > -90) return 'Extremamente fraco'
+      else return 'Provavelmente sem conexão'
     }
   }
 }