From be917bd88dedaf6a5e4da149d3ea2f7deada3a83 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Fri, 10 Jan 2025 15:02:47 +0530
Subject: [PATCH] add: tooltip.

---
 .../billing/paymentMethods.svelte             | 38 ++++++++++++-------
 1 file changed, 24 insertions(+), 14 deletions(-)

diff --git a/src/routes/(console)/organization-[organization]/billing/paymentMethods.svelte b/src/routes/(console)/organization-[organization]/billing/paymentMethods.svelte
index 892c7c017..ebffd5426 100644
--- a/src/routes/(console)/organization-[organization]/billing/paymentMethods.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/paymentMethods.svelte
@@ -20,6 +20,7 @@
     import DeleteOrgPayment from './deleteOrgPayment.svelte';
     import ReplaceCard from './replaceCard.svelte';
     import EditPaymentModal from '$routes/(console)/account/payments/editPaymentModal.svelte';
+    import { tooltip } from '$lib/actions/tooltip';
     import PaymentModal from '$lib/components/billing/paymentModal.svelte';
     import { user } from '$lib/stores/user';
 
@@ -249,20 +250,29 @@
                     <div
                         class="u-bold body-text-2 u-flex u-cross-center u-gap-8 u-padding-block-start-8">
                         <DropList bind:show={showDropdownBackup} placement="bottom-start">
-                            <Button
-                                text
-                                noMargin
-                                on:click={() => {
-                                    if (filteredPaymentMethods.length) {
-                                        showDropdownBackup = !showDropdownBackup;
-                                    } else {
-                                        isSelectedBackup = true;
-                                        showPayment = true;
-                                    }
-                                }}>
-                                <i class="icon-plus" />
-                                <span class="text"> Add a backup payment method </span>
-                            </Button>
+                            <div class="u-flex u-gap-8 u-cross-center">
+                                <Button
+                                    text
+                                    noMargin
+                                    on:click={() => {
+                                        if (filteredPaymentMethods.length) {
+                                            showDropdownBackup = !showDropdownBackup;
+                                        } else {
+                                            isSelectedBackup = true;
+                                            showPayment = true;
+                                        }
+                                    }}>
+                                    <span class="icon-plus" />
+                                    <span class="text"> Add a backup payment method </span>
+                                </Button>
+                                <span
+                                    class="icon-info u-cursor-pointer"
+                                    style="font-size: var(--icon-size-small)"
+                                    use:tooltip={{
+                                        content:
+                                            'When your default payment method fails, a backup method will be used to pay your invoice automatically'
+                                    }} />
+                            </div>
                             <svelte:fragment slot="list">
                                 {#if $paymentMethods.total}
                                     {#each filteredPaymentMethods as paymentMethod}