first overlay working

vue3/src/components/display/RecipeCard.vue

@@ -1,15 +1,29 @@
 <template>
     <template v-if="!loading">
         <v-card :to="`/recipe/${recipe.id}`" :style="{'height': height}">
-
+            <v-tooltip
-            <v-img v-if="recipe.image != null"
+                class="align-center justify-center"
+                location="top center" origin="overlap"
+                no-click-animation
+                :open-on-hover="recipe.description != null && recipe.description != ''"
+                contained
+                opacity="2%"
+            >
+                <template v-slot:activator="{ props }">
+                    <v-img v-if="recipe.image != null" v-bind="props"
                            cover
                            height="60%"
                            :src="recipe.image"
                     ></v-img>
-            <v-img v-else src="../../assets/recipe_no_image.svg" cover
+                    <v-img v-else src="../../assets/recipe_no_image.svg" cover v-bind="props"
                            height="60%"></v-img>
 
+                </template>
+                <div v-if="recipe.description != null && recipe.description != ''">
+                    {{recipe.description}}
+                </div>
+            </v-tooltip>
+
             <v-card-item>
                 <v-card-title>{{ recipe.name }}</v-card-title>
 
@@ -34,7 +48,6 @@
                     </div>
                 </v-row>
 
-                <div>{{ recipe.description }}</div>
             </v-card-text>
 
         </v-card>
@@ -42,7 +55,9 @@
     <template v-else>
         <v-card :style="{'height': height}">
             <v-img src="../../assets/recipe_no_image.svg" cover height="60%"></v-img>
-            <v-card-title><v-skeleton-loader type="heading"></v-skeleton-loader></v-card-title>
+            <v-card-title>
+                <v-skeleton-loader type="heading"></v-skeleton-loader>
+            </v-card-title>
             <v-card-text>
                 <v-skeleton-loader type="subtitle"></v-skeleton-loader>
             </v-card-text>

vue3/src/vuetify.ts

@@ -8,9 +8,10 @@ import {createVuetify} from 'vuetify'
 // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
 export default createVuetify({
     defaults: {
-        VCard: {
+        // disabled as this leads to cards overflowing if not careful, manually set on cards containing a multiselect until proper solution is found
-            class: 'overflow-visible' // this is needed so that vue-multiselect options show above a card, vuetify uses overlay container to avoid this
+        // VCard: {
-        }
+        //     class: 'overflow-visible' // this is needed so that vue-multiselect options show above a card, vuetify uses overlay container to avoid this
+        // }
     },
     theme: {
         defaultTheme: 'light',