More Styling and Added Tooltips

src/components/FellowPower/StandardItemsCard.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { usePowerItems } from '@/stores/powerItems'
 import { storeToRefs } from 'pinia'
-import { computed, ref } from 'vue';
+import { computed, ref } from 'vue'
 
 const { standardFellowItems, standardFellowItemTotal } = storeToRefs(usePowerItems())
 const headers = ref([
@@ -13,7 +13,7 @@ const headers = ref([
   },
   {
     title: 'Power',
-    align: 'end',
+    align: ' d-none d-lg-table-cell',
     sortable: true,
     key: '1.minItemPower'
   },
@@ -38,7 +38,6 @@ const sortBy = ref([
 ])
 
 const getColor = computed(() => (rarity: number): string => {
-  console.log('getting rarity')
   if (rarity === 4) {
     return 'amber'
   } else if (rarity === 3) {
@@ -63,6 +62,12 @@ const getColor = computed(() => (rarity: number): string => {
         :headers="headers"
       >
         <template v-slot:item.1.itemName="{ item }">
+          <v-tooltip activator="parent" v-if="item[1].tooltip != undefined">
+            <v-card variant="text" density="compact">
+              <v-card-title>Origin: {{ item[1].origin }}</v-card-title>
+              <v-card-text>{{ item[1].tooltip }}</v-card-text>
+            </v-card>
+          </v-tooltip>
           <v-chip :color="`${getColor(item[1].rarity)}`">
             {{ item[1].itemName }}
           </v-chip>