listing fee tooltip

frontend/marketplace/src/components/BuyCredits.vue

@@ -18,6 +18,7 @@ import { useFetcher, authHeader } from "@/utils/fetcher";
 import { useAuth } from "@/stores/auth";
 import { useWallet } from "@/stores/wallet";
 import { useNotifyer } from "@/utils/notifyer";
+import Tooltip from "@/components/ui/Tooltip.vue";
 
 export interface BuyCreditsProps {
   availableCredits: number;
@@ -226,9 +227,13 @@ const handleCardPayment = async (retirererName: string) => {
     <div class="flex flex-col mb-6 lg:mb-0">
       <div class="flex">
         <div class="flex flex-col mb-0 mt-7">
-          <p class="text-title18 text-subLabel text-right hidden md:block mr-3">
-            Cost
-          </p>
+          <div class="md:flex flex-row items-center hidden mr-3">
+            <p class="text-title18 text-subLabel text-right mr-2">Cost</p>
+            <Tooltip
+              label="The seller will be charged a 3% service fee + 0-5% payment processing fee"
+              icon-class="w-[40px] h-[40px]"
+            />
+          </div>
           <p class="text-title18 text-subLabel text-right hidden md:block mr-3">
             {{ amount >= 0 ? pricePerCredit * amount : "0" }}
           </p>
@@ -243,9 +248,15 @@ const handleCardPayment = async (retirererName: string) => {
           />
         </div>
       </div>
-      <p class="text-title18 text-subLabel md:hidden">
-        Cost {{ pricePerCredit * amount }} ${{ coinFormatted }}
-      </p>
+      <div class="flex items-center text-title18 text-subLabel mt-2 md:hidden">
+        Cost
+        {{ pricePerCredit * amount }} ${{ coinFormatted }}
+        <Tooltip
+          label="The seller will be charged a 3% service fee + 0-5% payment processing fee"
+          icon-class="w-[20px] h-[20px]"
+          class="ml-2"
+        />
+      </div>
     </div>
     <div class="flex flex-col w-full lg:w-auto lg:self-end">
       <BuyButton

frontend/marketplace/src/components/ui/Tooltip.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+interface Props {
+  label: string;
+  iconClass: string;
+}
+const props = defineProps<Props>();
+</script>
+<template>
+  <p class="tooltip" :data-tip="props.label">
+    <img :class="props.iconClass" src="../../assets/questionIcon.svg" />
+  </p>
+</template>
+<style>
+.tooltip {
+  --tooltip-color: #000000;
+  --tooltip-text-color: #ffffff;
+  --tooltip-tail: 10px;
+}
+</style>