feat(BaseItem): use popover instead of itemTitle

public/css/layout.css

@@ -172,7 +172,7 @@ section a:visited {
   text-decoration: none;
 }
 
-section img:not([class*='w-'], [width]) {
+section img:not([class*='w-'], [width], .gold) {
   width: 48px;
   height: 48px;
   box-sizing: border-box;
@@ -251,7 +251,12 @@ section img:not([class*='w-'], [width]) {
 }
 
 /* class with img of gold*/
-.gold,
+.gold {
+  width: 32px;
+  height: 32px;
+  box-sizing: border-box;
+  vertical-align: middle;
+}
 .warrior_skill {
   width: 30px;
   height: 30px;
@@ -282,9 +287,7 @@ section img:not([class*='w-'], [width]) {
   position: relative;
 }
 
-.stockpile_item img,
-.inventory_item img,
-.item img:not(.gold) {
+.stockpile_item img:not(.gold) {
   width: 48px;
   height: 48px;
   cursor: pointer;

resources/js/ui/components/base/BaseItem.vue

@@ -1,31 +1,43 @@
 <template>
   <div class="item">
-    <figure
-      @mouseleave="disableTooltip ? itemTitle.hide() : null"
-      @mouseover="disableTooltip ? null : itemTitle.show($event)"
-    >
-      <img :src="'/images/' + item + '.png'" alt="inventory-item" />
-      <figcaption class="tooltip">
-        <span class="tooltip_item">{{ jsUcWords(item) }}</span>
-        <span v-if="item !== undefined && amount !== undefined">
-          <br />
-
-          x {{ amount }}
-        </span>
-      </figcaption>
+    <figure @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
+      <img
+        :src="'/images/' + item + '.png'"
+        :alt="t('game item')"
+        class="item-image h-12 w-12 align-middle"
+      />
     </figure>
     <span v-if="showAmount && amount !== undefined" class="item_amount">
       {{ itemAmountWithDelimiter }}
     </span>
+    <ul
+      ref="tooltipEl"
+      popover="manual"
+      class="item-tooltip bg-primary-800 min-h-20 max-w-[125px] border-2 border-black py-2 text-center text-xs text-white"
+    >
+      <li class="w-[120px]">
+        <span class="tooltip_item">{{ jsUcWords(item) }}</span>
+        <br />
+        x {{ amount }}
+      </li>
+      <li
+        v-if="item !== 'gold'"
+        class="flex w-[120px] flex-row items-center justify-center gap-1"
+      >
+        <span class="item-price-label">{{ itemPrice }}</span>
+        <img class="gold" src="/images/gold.png" :alt="$t('gold icon')" />
+      </li>
+    </ul>
   </div>
 </template>
 
 <script setup lang="ts">
 import { jsUcWords } from '@/utilities/uppercase';
-import { computed } from 'vue';
-import { itemTitle } from '@/utilities/itemTitle';
+import { computed, useId, useTemplateRef } from 'vue';
 import { formatItemAmount } from '@/utilities/formatters';
 import type { Item } from '@/types/Item';
+import { itemPrices } from '@/clientScripts/inventory';
+import { useI18n } from 'vue-i18n';
 
 interface Props {
   disableTooltip?: boolean;
@@ -34,6 +46,8 @@ interface Props {
   showAmount?: boolean;
 }
 
+const { t } = useI18n();
+
 const {
   disableTooltip = false,
   showAmount = true,
@@ -47,4 +61,39 @@ const itemAmountWithDelimiter = computed((): string | number => {
   }
   return formatItemAmount(amount);
 });
+
+const tooltip = useTemplateRef<HTMLElement | null>('tooltipEl');
+const anchorName = `--item-${useId()}`;
+
+const itemPrice = computed(() => itemPrices.findItem(item));
+
+const onMouseEnter = () => {
+  if (!disableTooltip) {
+    tooltip.value?.showPopover();
+  }
+};
+
+const onMouseLeave = () => {
+  if (!disableTooltip) {
+    tooltip.value?.hidePopover();
+  }
+};
 </script>
+<style>
+.item figure {
+  anchor-name: v-bind(anchorName);
+}
+.item-tooltip {
+  position-anchor: v-bind(anchorName);
+  position-area: right;
+  position-try: flip-inline;
+}
+
+.item img {
+  image-rendering: pixelated;
+  image-rendering: -moz-crisp-edges;
+}
+.item-price-label {
+  text-box-trim: trim-end;
+}
+</style>