fix(vue): correct bad popovers breaking Chrome

website/client/src/components/userMenu/profileStats.vue

@@ -190,14 +190,10 @@
         class="col-12 col-md-6"
       >
         <div class="row col-12 stats-column">
-          <div class="col-12 col-md-4 attribute-label">
-            <span
-              class="hint"
-              :popover-title="$t(statInfo.title)"
-              popover-placement="right"
-              :popover="$t(statInfo.popover)"
-              popover-trigger="mouseenter"
-            ></span>
+          <div
+            :id="`${stat}-information`"
+            class="col-12 col-md-4 attribute-label"
+          >
             <div
               class="stat-title"
               :class="stat"
@@ -206,6 +202,13 @@
             </div>
             <strong class="number">{{ totalStatPoints(stat) | floorWholeNumber }}</strong>
           </div>
+          <b-popover
+            :target="`${stat}-information`"
+            triggers="hover focus"
+            placement="right"
+            :prevent-overflow="false"
+            :content="$t(statInfo.popover)"
+          />
           <div class="col-12 col-md-6">
             <ul class="bonus-stats">
               <li>
@@ -355,7 +358,7 @@ export default {
       },
 
       allocateStatsList: {
-        str: { title: 'allocateStr', popover: 'strengthText', allocatepop: 'allocateStrPop' },
+        str: { title: 'allocateStr', popover: 'strText', allocatepop: 'allocateStrPop' },
         int: { title: 'allocateInt', popover: 'intText', allocatepop: 'allocateIntPop' },
         con: { title: 'allocateCon', popover: 'conText', allocatepop: 'allocateConPop' },
         per: { title: 'allocatePer', popover: 'perText', allocatepop: 'allocatePerPop' },
@@ -364,7 +367,7 @@ export default {
       stats: {
         str: {
           title: 'strength',
-          popover: 'strengthText',
+          popover: 'strText',
         },
         int: {
           title: 'intelligence',