diff --git a/website/client/src/components/inventory/itemPopover.vue b/website/client/src/components/inventory/itemPopover.vue
new file mode 100644
index 0000000000..22b3e49f9a
--- /dev/null
+++ b/website/client/src/components/inventory/itemPopover.vue
@@ -0,0 +1,110 @@
+<template>
+  <div
+    ref="root"
+    v-if="draggedItem"
+    class="draggedItemInfo mouse"
+    v-mousePosition="30"
+    @mouseMoved="mouseMoved($event)">
+      <Sprite
+        class="dragging-icon"
+        :image-name="imageName()"
+      />
+      <div class="popover">
+        <div
+          class="popover-content"
+        >
+          {{ $t(popoverTextKey, { [translationKey]: itemText() }) }}
+        </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .draggedItemInfo {
+    position: absolute;
+    left: -500px;
+
+    z-index: 1080;
+
+    &.mouse {
+      position: fixed;
+      pointer-events: none
+    }
+
+    .dragging-icon {
+      width: 68px;
+      margin: 0 auto 8px;
+      display: block;
+      transform: scale(1.5);
+    }
+
+    .popover {
+      position: static;
+      width: 180px;
+    }
+
+    .popover-content {
+      color: white;
+      margin: 15px;
+      text-align: center;
+    }
+  }
+</style>
+
+<script>
+import Sprite from '@/components/ui/sprite';
+import MouseMoveDirective from '@/directives/mouseposition.directive';
+
+export default {
+  name: 'ItemPopover',
+  components: {
+    Sprite,
+  },
+  directives: {
+    mousePosition: MouseMoveDirective,
+  },
+  props: {
+    draggedItem: {
+      type: Object,
+      default: null,
+    },
+    popoverTextKey: {
+      type: String,
+      default: '',
+    },
+    translationKey: {
+      type: String,
+      default: '',
+    },
+  },
+  methods: {
+    imageName () {
+      if (this.draggedItem) {
+        if (this.draggedItem.class) {
+          return this.draggedItem.class;
+        }
+        if (this.draggedItem.target) {
+          return `Pet_Food_${this.draggedItem.key}`;
+        }
+      }
+      return '';
+    },
+    mouseMoved ($event) {
+      if (this.$refs.root) {
+        this.$refs.root.style.left = `${$event.x - 60}px`;
+        this.$refs.root.style.top = `${$event.y + 10}px`;
+      }
+    },
+    itemText () {
+      if (this.draggedItem) {
+        if (this.draggedItem.text) {
+          return this.draggedItem.text();
+        }
+        return this.draggedItem.class;
+      }
+      return '';
+    },
+  },
+};
+
+</script>
diff --git a/website/client/src/components/inventory/items/index.vue b/website/client/src/components/inventory/items/index.vue
index 9eac859c0e..a0e745b2f5 100644
--- a/website/client/src/components/inventory/items/index.vue
+++ b/website/client/src/components/inventory/items/index.vue
@@ -1,8 +1,6 @@
 <template>
   <div
-    v-mousePosition="30"
     class="row"
-    @mouseMoved="mouseMoved($event)"
   >
     <div class="standard-sidebar d-none d-sm-block">
       <filter-sidebar>
@@ -99,7 +97,7 @@
                   {{ context.item.text }}
                 </h4>
                 <div
-                  v-if="currentDraggingPotion == null"
+                  v-if="!currentDraggingPotion"
                   class="popover-content-text"
                 >
                   {{ context.item.notes }}
@@ -148,7 +146,7 @@
                 <h4 class="popover-content-title">
                   {{ context.item.text }}
                 </h4>
-                <div class="popover-content-text">
+                <div class="popover-content-text" v-if="!currentDraggingEgg">
                   {{ context.item.notes }}
                 </div>
               </template>
@@ -224,122 +222,24 @@
       </div>
     </div>
     <hatchedPetDialog />
-    <div
-      ref="draggingEggInfo"
-      class="eggInfo"
-    >
-      <div v-if="currentDraggingEgg != null">
-        <Sprite
-          class="dragging-icon"
-          :imageName="`Pet_Egg_${currentDraggingEgg.key}`"
-        />
-        <div class="popover">
-          <div class="popover-content">
-            {{ $t('dragThisEgg', {eggName: currentDraggingEgg.text }) }}
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      v-if="eggClickMode"
-      ref="clickEggInfo"
-      class="eggInfo mouse"
-    >
-      <div v-if="currentDraggingEgg != null">
-        <Sprite
-          class="dragging-icon"
-          :imageName="`Pet_Egg_${currentDraggingEgg.key}`"
-        />
-        <div class="popover">
-          <div
-            class="popover-content"
-          >
-            {{ $t('clickOnPotionToHatch', {eggName: currentDraggingEgg.text }) }}
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      ref="draggingPotionInfo"
-      class="hatchingPotionInfo"
-    >
-      <div v-if="currentDraggingPotion != null">
-        <Sprite
-          class="dragging-icon"
-          :imageName="`Pet_HatchingPotion_${currentDraggingPotion.key}`"
-        />
-        <div class="popover">
-          <div
-            class="popover-content"
-          >
-            {{ $t('dragThisPotion', {potionName: currentDraggingPotion.text }) }}
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      v-if="potionClickMode"
-      ref="clickPotionInfo"
-      class="hatchingPotionInfo mouse"
-    >
-      <div v-if="currentDraggingPotion != null">
-        <Sprite
-          class="dragging-icon"
-          :imageName="`Pet_HatchingPotion_${currentDraggingPotion.key}`"
-        />
-        <div class="popover">
-          <div
-            class="popover-content"
-          >
-            {{ $t('clickOnEggToHatch', {potionName: currentDraggingPotion.text }) }}
-          </div>
-        </div>
-      </div>
-    </div>
+    <ItemPopover
+      :dragged-item="currentDraggingEgg"
+      popoverTextKey="clickOnPotionToHatch"
+      translationKey="eggName" />
+    <ItemPopover
+      :dragged-item="currentDraggingPotion"
+      popoverTextKey="clickOnEggToHatch"
+      translationKey="potionName" />
     <questDetailModal :group="user.party" />
     <cards-modal :card-options="cardOptions" />
   </div>
 </template>
 
-<style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
-
-  .eggInfo, .hatchingPotionInfo {
-    position: absolute;
-    left: -500px;
-
-    z-index: 1080;
-
-    &.mouse {
-      position: fixed;
-      pointer-events: none
-    }
-
-    .dragging-icon {
-      width: 68px;
-      margin: 0 auto 8px;
-      display: block;
-      transform: scale(1.5);
-    }
-
-    .popover {
-      position: inherit;
-      width: 180px;
-    }
-
-    .popover-content {
-      color: white;
-      margin: 15px;
-      text-align: center;
-    }
-  }
-
-</style>
-
 <script>
 import each from 'lodash/each';
 import throttle from 'lodash/throttle';
 import moment from 'moment';
+import ItemPopover from '@/components/inventory/itemPopover';
 import Item from '@/components/inventory/item';
 import ItemRows from '@/components/ui/itemRows';
 import CountBadge from '@/components/ui/countBadge';
@@ -356,11 +256,9 @@ import { createAnimal } from '@/libs/createAnimal';
 
 import notifications from '@/mixins/notifications';
 import DragDropDirective from '@/directives/dragdrop.directive';
-import MouseMoveDirective from '@/directives/mouseposition.directive';
 import FilterGroup from '@/components/ui/filterGroup';
 import Checkbox from '@/components/ui/checkbox';
 import SelectTranslatedArray from '@/components/tasks/modal-controls/selectTranslatedArray';
-import Sprite from '@/components/ui/sprite';
 
 const allowedSpecialItems = ['snowball', 'spookySparkles', 'shinySeed', 'seafoam'];
 
@@ -378,8 +276,6 @@ const groups = [
   allowedItems,
 }));
 
-let lastMouseMoveEvent = {};
-
 export default {
   name: 'Items',
   components: {
@@ -394,11 +290,10 @@ export default {
     cardsModal,
     QuestInfo,
     FilterSidebar,
-    Sprite,
+    ItemPopover,
   },
   directives: {
     drag: DragDropDirective,
-    mousePosition: MouseMoveDirective,
   },
   mixins: [notifications],
   data () {
@@ -409,9 +304,7 @@ export default {
       sortBy: 'quantity', // or 'AZ'
 
       currentDraggingEgg: null,
-      eggClickMode: false,
       currentDraggingPotion: null,
-      potionClickMode: false,
       cardOptions: {
         cardType: '',
         messageOptions: 0,
@@ -571,22 +464,13 @@ export default {
         }
 
         this.currentDraggingPotion = null;
-        this.potionClickMode = false;
         return;
       }
 
       if (this.currentDraggingEgg === null || this.currentDraggingEgg !== egg) {
         this.currentDraggingEgg = egg;
-        this.eggClickMode = true;
-
-        // Wait for the div.eggInfo.mouse node to be added to the DOM before
-        // changing its position.
-        this.$nextTick(() => {
-          this.mouseMoved(lastMouseMoveEvent);
-        });
       } else {
         this.currentDraggingEgg = null;
-        this.eggClickMode = false;
       }
     },
     onPotionClicked ($event, potion) {
@@ -596,21 +480,12 @@ export default {
         }
 
         this.currentDraggingEgg = null;
-        this.eggClickMode = false;
         return;
       }
       if (this.currentDraggingPotion === null || this.currentDraggingPotion !== potion) {
         this.currentDraggingPotion = potion;
-        this.potionClickMode = true;
-
-        // Wait for the div.hatchingPotionInfo.mouse node to be added to the
-        // DOM before changing its position.
-        this.$nextTick(() => {
-          this.mouseMoved(lastMouseMoveEvent);
-        });
       } else {
         this.currentDraggingPotion = null;
-        this.potionClickMode = false;
       }
     },
 
@@ -644,23 +519,6 @@ export default {
         });
       }
     },
-
-    mouseMoved ($event) {
-      // Keep track of the last mouse position even in click mode so that we
-      // know where to position the dragged potion/egg info on item click.
-      lastMouseMoveEvent = $event;
-
-      // Update the potion/egg popover if we are already dragging it.
-      if (this.potionClickMode) {
-        // dragging potioninfo is 180px wide (90 would be centered)
-        this.$refs.clickPotionInfo.style.left = `${$event.x - 60}px`;
-        this.$refs.clickPotionInfo.style.top = `${$event.y + 10}px`;
-      } else if (this.eggClickMode) {
-        // dragging eggInfo is 180px wide (90 would be centered)
-        this.$refs.clickEggInfo.style.left = `${$event.x - 60}px`;
-        this.$refs.clickEggInfo.style.top = `${$event.y + 10}px`;
-      }
-    },
   },
 };
 </script>
diff --git a/website/client/src/components/inventory/stable/index.vue b/website/client/src/components/inventory/stable/index.vue
index 112aabd886..b34e973581 100644
--- a/website/client/src/components/inventory/stable/index.vue
+++ b/website/client/src/components/inventory/stable/index.vue
@@ -1,8 +1,6 @@
 <template>
   <div
-    v-mousePosition="30"
     class="row stable"
-    @mouseMoved="mouseMoved($event)"
   >
     <div class="standard-sidebar d-none d-sm-block">
       <filter-sidebar>
@@ -265,43 +263,10 @@
       </inventoryDrawer>
     </div>
     <hatchedPetDialog :hide-text="true" />
-    <div
-      ref="dragginFoodInfo"
-      class="foodInfo"
-    >
-      <div v-if="currentDraggingFood != null">
-        <Sprite
-          class="food-icon"
-          :image-name="`Pet_Food_${currentDraggingFood.key}`"
-        />
-        <div class="popover">
-          <div
-            class="popover-content"
-          >
-            {{ $t('dragThisFood', {foodName: currentDraggingFood.text() }) }}
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      v-if="foodClickMode"
-      ref="clickFoodInfo"
-      class="foodInfo mouse"
-    >
-      <div v-if="currentDraggingFood != null">
-        <Sprite
-          class="food-icon"
-          :image-name="`Pet_Food_${currentDraggingFood.key}`"
-        />
-        <div class="popover">
-          <div
-            class="popover-content"
-          >
-            {{ $t('clickOnPetToFeed', {foodName: currentDraggingFood.text() }) }}
-          </div>
-        </div>
-      </div>
-    </div>
+    <ItemPopover
+      :dragged-item="currentDraggingFood"
+      popoverTextKey="clickOnPetToFeed"
+      translationKey="foodName" />
     <mount-raised-modal />
     <welcome-modal />
     <hatching-modal :hatchable-pet.sync="hatchablePet" />
@@ -364,34 +329,6 @@
     margin-bottom: 0;
   }
 
-  .foodInfo {
-    position: absolute;
-    left: -500px;
-
-    z-index: 1080;
-
-    &.mouse {
-      position: fixed;
-      pointer-events: none
-    }
-
-    .food-icon {
-      margin: 0 auto 8px;
-      transform: scale(1.5);
-    }
-
-    .popover {
-      position: inherit;
-      width: 180px;
-    }
-
-    .popover-content {
-      color: white;
-      margin: 15px;
-      text-align: center;
-    }
-  }
-
   .hatchablePopover {
     width: 180px;
 
@@ -428,6 +365,7 @@ import _throttle from 'lodash/throttle';
 import groupBy from 'lodash/groupBy';
 import { mapState } from '@/libs/store';
 
+import ItemPopover from '@/components/inventory/itemPopover';
 import PetItem from './petItem';
 import MountItem from './mountItem.vue';
 import FoodItem from './foodItem';
@@ -440,7 +378,6 @@ import InventoryDrawer from '@/components/shared/inventoryDrawer';
 
 import ResizeDirective from '@/directives/resize.directive';
 import DragDropDirective from '@/directives/dragdrop.directive';
-import MouseMoveDirective from '@/directives/mouseposition.directive';
 
 import { createAnimal } from '@/libs/createAnimal';
 
@@ -450,7 +387,6 @@ import notifications from '@/mixins/notifications';
 import openedItemRowsMixin from '@/mixins/openedItemRows';
 import petMixin from '@/mixins/petMixin';
 import seasonalNPC from '@/mixins/seasonalNPC';
-import Sprite from '@/components/ui/sprite';
 
 import { CONSTANTS, setLocalSetting, getLocalSetting } from '@/libs/userlocalManager';
 import { isOwned } from '../../../libs/createAnimal';
@@ -483,12 +419,11 @@ export default {
     WelcomeModal,
     HatchingModal,
     InventoryDrawer,
-    Sprite,
+    ItemPopover,
   },
   directives: {
     resize: ResizeDirective,
     drag: DragDropDirective,
-    mousePosition: MouseMoveDirective,
   },
   mixins: [notifications, openedItemRowsMixin, petMixin, seasonalNPC],
   data () {