From cc02444e3373641b3243e2efa2af5558ca17f309 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 19 Mar 2024 01:15:49 +0100
Subject: [PATCH] fix: ExplainWhat popover

---
 app/src/components/globals/ExplainWhat.vue | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/app/src/components/globals/ExplainWhat.vue b/app/src/components/globals/ExplainWhat.vue
index 411bcdd7..ed3665ab 100644
--- a/app/src/components/globals/ExplainWhat.vue
+++ b/app/src/components/globals/ExplainWhat.vue
@@ -2,16 +2,21 @@
   <span class="explain-what">
     <slot name="default" />
     <span class="explain-what-popover-container">
-      <BButton :id="id" href="#" variant="light">
+      <BButton
+        variant="light"
+        @focus="open = true"
+        @blur="open = false"
+        @click="open = !open"
+      >
         <YIcon iname="question" />
         <span class="sr-only">
           {{ $t('details_about', { subject: title }) }}
         </span>
       </BButton>
+      <!-- FIXME missing prop `trigger` in bvn https://github.com/bootstrap-vue-next/bootstrap-vue-next/issues/1275 and looks like `placement` doesn't work -->
       <BPopover
-        placement="auto"
-        :target="id"
-        triggers="focus"
+        v-model="open"
+        placement="top"
         custom-class="explain-what-popover"
         :variant="variant"
         :title="title"
@@ -38,6 +43,12 @@ export default {
       return Object.assign({ md: 4, xl: 3 }, this.cols)
     },
   },
+
+  data() {
+    return {
+      open: false,
+    }
+  },
 }
 </script>