From 7abfb8bc05b05cb6ee9b9ef49cd629c9e9c48a75 Mon Sep 17 00:00:00 2001
From: Kamil Klecha <urlikodd@gmail.com>
Date: Tue, 19 Oct 2021 17:22:57 +0200
Subject: [PATCH] Added tooltip

---
 src/components/City.vue | 38 ++++++++++++++++++++++----------------
 1 file changed, 22 insertions(+), 16 deletions(-)

diff --git a/src/components/City.vue b/src/components/City.vue
index 9b4d75f..34ff6b3 100644
--- a/src/components/City.vue
+++ b/src/components/City.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-card height="230" width="350" v-if="data !== undefined">
+    <v-card width="350" v-if="data !== undefined">
       <v-list-item three-line>
         <v-list-item-content>
           <v-card-title class="d-inline-block text-truncate pt-0 px-0">{{
@@ -31,20 +31,26 @@
       </v-list-item>
       <v-divider></v-divider>
       <v-row justify="space-around">
-        <v-col class="text-center" v-for="i in 5" :key="i">
+        <v-col class="text-center pb-0" v-for="i in 5" :key="i">
           <div>{{ getMoment(data.hourly[i * 3].dt, "HH:mm") }}</div>
-          <div>
-            <v-img
-            :src="
-              'http://openweathermap.org/img/wn/' +
-              data.hourly[i * 3].weather[0].icon +
-              '.png'
-            "
-            height="40"
-            width="40"
-          ></v-img>
-          </div>
-          <div class="text-center">{{ Math.round(data.hourly[i * 3].temp) }} °C</div>
+          <v-tooltip bottom>
+            <template v-slot:activator="{ on }">
+              <v-img
+                :src="
+                  'http://openweathermap.org/img/wn/' +
+                  data.hourly[i * 3].weather[0].icon +
+                  '.png'
+                "
+                height="40"
+                width="40"
+                class="mx-auto"
+                v-on="on"
+              ></v-img>
+            </template>
+            <span>{{ data.hourly[i * 3].weather[0].description }}</span>
+          </v-tooltip>
+
+          <div>{{ Math.round(data.hourly[i * 3].temp) }} °C</div>
         </v-col>
       </v-row>
     </v-card>
@@ -55,7 +61,7 @@
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
 import axios from "axios";
-const moment = require('moment');
+const moment = require("moment");
 
 @Component
 export default class City extends Vue {
@@ -63,7 +69,7 @@ export default class City extends Vue {
 
   private created() {
     this.getData();
-    setInterval(this.getData, 1000*60);
+    setInterval(this.getData, 1000 * 60);
   }
 
   private getData() {