feat: add tooltip to button Next

bcgov · Oct 9, 2023 · ae3a94d · ae3a94d
1 parent 3c69a38
commit ae3a94d
Showing 1 changed file with 18 additions and 12 deletions.
diff --git a/frontend/src/pages/FormBCeIDPage.vue b/frontend/src/pages/FormBCeIDPage.vue
@@ -4,6 +4,7 @@ import { reactive, watch, toRef, ref, getCurrentInstance, computed } from "vue";
 import "@carbon/web-components/es/components/button/index";
 import "@carbon/web-components/es/components/progress-indicator/index";
 import "@carbon/web-components/es/components/notification/index";
+import "@carbon/web-components/es/components/tooltip/index";
 // Composables
 import { useEventBus, useMediaQuery } from "@vueuse/core";
 import { useRouter } from "vue-router";
@@ -485,18 +486,23 @@ const isSmallScreen = useMediaQuery("(max-width: 671px)");
             <span>Back</span>
           </cds-button>
 
-          <cds-button
-            v-if="!isLast && !endAndLogOut && !mailAndLogOut"
-            id="nextBtn"
-            kind="primary"
-            size="lg"
-            v-on:click="onNext"
-            :disabled="progressData[currentTab].valid === false"
-            data-test="wizard-next-button"
-            >
-            <span>Next</span>
-            <ArrowRight16 slot="icon" />
-          </cds-button>
+          <cds-tooltip>
+            <cds-button
+              v-if="!isLast && !endAndLogOut && !mailAndLogOut"
+              id="nextBtn"
+              kind="primary"
+              size="lg"
+              v-on:click="onNext"
+              :disabled="progressData[currentTab].valid === false"
+              data-test="wizard-next-button"
+              >
+              <span>Next</span>
+              <ArrowRight16 slot="icon" />
+            </cds-button>
+            <cds-tooltip-content v-show="progressData[currentTab].valid === false">
+              All fields must be filled in correctly.
+            </cds-tooltip-content>
+          </cds-tooltip>
 
           <cds-button
             v-if="isLast && !endAndLogOut && !mailAndLogOut"