add disable and close methods for bootstrap tooltips modules

resources/ts/bo/components/PasswordVisibility.vue

@@ -10,7 +10,7 @@
 
       type="button"
       :title="visible ? __('vue.PasswordVisibility.hide') : __('vue.PasswordVisibility.show')"
-      data-bs="tooltip"
+      data-bs-toggle="tooltip"
     >
       <FontAwesomeIcon
 
@@ -30,13 +30,13 @@
 
 <script lang="ts">
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { Tooltip } from "bootstrap";
 import { defineComponent } from "vue";
+import bsTooltips from "./../../modules/bsTooltips";
 import trans from "./../../modules/trans";
 
 export default defineComponent({
   name: "PasswordVisibility",
-  mixins: [trans],
+  mixins: [bsTooltips, trans],
   components: { FontAwesomeIcon },
   data(): {
     inputId: string;
@@ -68,7 +68,7 @@ export default defineComponent({
     }
     this.input = this.input as HTMLInputElement;
     this.$nextTick(() => {
-      this.updateBootstrapTooltip();
+      this.initTooltips();
     });
   },
   methods: {
@@ -97,32 +97,7 @@ export default defineComponent({
         this.visible = false;
       }
       this.$nextTick(() => {
-        this.updateBootstrapTooltip();
-      });
-    },
-    /**
-     * Update Bootstrap tooltips.
-     */
-    updateBootstrapTooltip() {
-      let newTooltipList = [].slice.call(
-        document.querySelectorAll(
-          ".password-visibility-" + this.inputId + " [data-bs=\"tooltip\"]"
-        )
-      ) as HTMLButtonElement[];
-      let tmp = newTooltipList.filter((x) => !this.tooltipList.includes(x));
-      tmp.map((tooltip) => {
-        return new Tooltip(tooltip);
-      });
-      this.closeBootstrapTooltip();
-      this.tooltipList = newTooltipList;
-    },
-    /**
-     * Close all Bootstrap tooltips.
-     */
-    closeBootstrapTooltip() {
-      this.tooltipList.forEach((tooltip) => {
-        tooltip.blur();
-        Tooltip.getInstance(tooltip)?.hide();
+        this.initTooltips();
       });
     },
   },

resources/ts/modules/bsTooltips.ts

@@ -4,12 +4,11 @@ let tooltips: Array<bootstrap.Tooltip> = [];
 
 export default {
     methods: {
+        /**
+         * Initialize all Bootstrap tooltips.
+         */
         initTooltips() {
-            // Disable tooltips on reboot.
-            tooltips.forEach((tooltip) => {
-                tooltip.disable();
-                tooltip.hide();
-            });
+            this.disableBootstrapTooltip();
             tooltips = [].slice
                 .call(document.querySelectorAll("[data-bs-toggle=\"tooltip\"]"))
                 .map(function (tooltipTriggerEl) {
@@ -22,5 +21,25 @@ export default {
                     });
                 });
         },
+        /**
+         * Disable all Bootstrap tooltips.
+         */
+        disableBootstrapTooltip() {
+            tooltips.forEach((tooltip) => {
+                tooltip.disable();
+                tooltip.hide();
+            });
+        },
+        /**
+         * Close all Bootstrap tooltips.
+         */
+        closeBootstrapTooltip() {
+            [].slice
+                .call(document.querySelectorAll("[data-bs-toggle=\"tooltip\"]"))
+                .forEach((tooltip: HTMLElement) => {
+                    tooltip.blur();
+                    window.bootstrap.Tooltip.getInstance(tooltip)?.hide();
+                });
+        },
     },
 };