add tooltip to fab (#497)

frontend/src/components/Recipe/ContextMenu.vue

@@ -17,10 +17,24 @@
       :nudge-top="menuTop ? '5' : '0'"
       allow-overflow
     >
-      <template v-slot:activator="{ on, attrs }">
-        <v-btn :fab="fab" :small="fab" :color="color" :icon="!fab" dark v-bind="attrs" v-on="on" @click.prevent>
-          <v-icon>{{ menuIcon }}</v-icon>
-        </v-btn>
+      <template v-slot:activator="{ on: onMenu, attrs: attrsMenu }">
+        <v-tooltip bottom dark :color="color">
+          <template v-slot:activator="{ on: onTooltip, attrs: attrsTooltip }">
+            <v-btn
+              :fab="fab"
+              :small="fab"
+              :color="color"
+              :icon="!fab"
+              dark
+              v-bind="{ ...attrsMenu, ...attrsTooltip }"
+              v-on="{ ...onMenu, ...onTooltip }"
+              @click.prevent
+            >
+              <v-icon>{{ menuIcon }}</v-icon>
+            </v-btn>
+          </template>
+          <span>{{ $t("general.more") }}</span>
+        </v-tooltip>
       </template>
       <v-list dense>
         <v-list-item
@@ -142,7 +156,7 @@ export default {
                 url: this.recipeURL,
               })
               .then(() => console.log("Successful share"))
-              .catch((error) => {
+              .catch(error => {
                 console.log("WebShareAPI not supported", error);
                 this.updateClipboard();
               });

frontend/src/components/Recipe/FavoriteBadge.vue

@@ -1,16 +1,23 @@
 <template>
-  <v-btn
-    small
-    @click.prevent="toggleFavorite"
-    v-if="isFavorite || showAlways"
-    :color="buttonStyle ? 'primary' : 'secondary'"
-    :icon="!buttonStyle"
-    :fab="buttonStyle"
-  >
-    <v-icon :small="!buttonStyle" color="secondary">
-      {{ isFavorite ? "mdi-heart" : "mdi-heart-outline" }}
-    </v-icon>
-  </v-btn>
+  <v-tooltip right :color="buttonStyle ? 'primary' : 'secondary'">
+    <template v-slot:activator="{ on, attrs }">
+      <v-btn
+        small
+        @click.prevent="toggleFavorite"
+        v-if="isFavorite || showAlways"
+        :color="buttonStyle ? 'primary' : 'secondary'"
+        :icon="!buttonStyle"
+        :fab="buttonStyle"
+        v-bind="attrs"
+        v-on="on"
+      >
+        <v-icon :small="!buttonStyle" color="secondary">
+          {{ isFavorite ? "mdi-heart" : "mdi-heart-outline" }}
+        </v-icon>
+      </v-btn>
+    </template>
+    <span>{{ isFavorite ? $t("recipe.remove-from-favorites") : $t("recipe.add-to-favorites") }}</span>
+  </v-tooltip>
 </template>
 
 <script>

frontend/src/components/Recipe/RecipePageActionMenu.vue

@@ -18,9 +18,14 @@
     />
     <v-spacer></v-spacer>
     <div v-if="!value" class="custom-btn-group ma-1">
-      <v-btn fab small class="mx-1" color="info" @click="$emit('input', true)">
-        <v-icon> {{ $globals.icons.edit }} </v-icon>
-      </v-btn>
+      <v-tooltip bottom color="info">
+        <template v-slot:activator="{ on, attrs }">
+          <v-btn fab small class="mx-1" color="info" v-bind="attrs" v-on="on" @click="$emit('input', true)">
+            <v-icon> {{ $globals.icons.edit }} </v-icon>
+          </v-btn>
+        </template>
+        <span>{{ $t("general.edit") }}</span>
+      </v-tooltip>
       <ContextMenu
         :menu-top="false"
         :slug="slug"