diff --git a/website/client/src/components/creatorIntro.vue b/website/client/src/components/creatorIntro.vue
index 1d8a32d304..07ef7c34d4 100644
--- a/website/client/src/components/creatorIntro.vue
+++ b/website/client/src/components/creatorIntro.vue
@@ -183,10 +183,8 @@
           <div
             v-for="bg in backgroundShopSets[0].items"
             :key="bg.key"
+            :id="bg.key"
             class="col-2"
-            :popover-title="bg.text"
-            :popover="bg.notes"
-            popover-trigger="mouseenter"
             @click="unlock('background.' + bg.key)"
           >
             <div
@@ -195,6 +193,13 @@
             >
               <div class="small-rectangle"></div>
             </div>
+            <b-popover
+              :target="bg.key"
+              triggers="hover focus"
+              placement="bottom"
+              :prevent-overflow="false"
+              :content="bg.notes"
+            />
           </div>
         </div>
         <div
@@ -211,16 +216,21 @@
             <div
               v-for="bg in backgroundShopSets[2].items"
               :key="bg.key"
+              :id="bg.key"
               class="col-4 text-center customize-option background-button"
-              :popover-title="bg.text"
-              :popover="bg.notes"
-              popover-trigger="mouseenter"
               @click="unlock('background.' + bg.key)"
             >
               <div
                 class="background"
                 :class="`background_${bg.key}`"
               ></div>
+              <b-popover
+                :target="bg.key"
+                triggers="hover focus"
+                placement="bottom"
+                :prevent-overflow="false"
+                :content="bg.notes"
+              />
             </div>
           </div>
         </div>
@@ -236,10 +246,8 @@
             <div
               v-for="bg in backgroundShopSets[1].items"
               :key="bg.key"
+              :id="bg.key"
               class="col-4 text-center customize-option background-button"
-              :popover-title="bg.text"
-              :popover="bg.notes"
-              popover-trigger="mouseenter"
               @click="!user.purchased.background[bg.key]
                 ? backgroundSelected(bg) : unlock('background.' + bg.key)"
             >
@@ -270,6 +278,13 @@
                   :pinned="isBackgroundPinned(bg)"
                 />
               </span>
+              <b-popover
+                :target="bg.key"
+                triggers="hover focus"
+                placement="bottom"
+                :prevent-overflow="false"
+                :content="bg.notes"
+              />
             </div>
           </div>
         </div>
@@ -302,10 +317,8 @@
             <div
               v-for="bg in set.items"
               :key="bg.key"
+              :id="bg.key"
               class="col-4 text-center customize-option background-button"
-              :popover-title="bg.text"
-              :popover="bg.notes"
-              popover-trigger="mouseenter"
               @click="!user.purchased.background[bg.key]
                 ? backgroundSelected(bg) : unlock('background.' + bg.key)"
             >
@@ -336,6 +349,13 @@
                   :pinned="isBackgroundPinned(bg)"
                 />
               </span>
+              <b-popover
+                :target="bg.key"
+                triggers="hover focus"
+                placement="bottom"
+                :prevent-overflow="false"
+                :content="bg.notes"
+              />
             </div>
             <div
               v-if="!ownsSet('background', set.items) && set.identifier !== 'incentiveBackgrounds'"
@@ -358,16 +378,21 @@
           <div
             v-for="(bg) in ownedBackgrounds"
             :key="bg.key"
+            :id="bg.key"
             class="col-4 text-center customize-option background-button"
-            :popover-title="bg.text"
-            :popover="bg.notes"
-            popover-trigger="mouseenter"
             @click="unlock('background.' + bg.key)"
           >
             <div
               class="background"
               :class="[`background_${bg.key}`, backgroundLockedStatus(bg.key)]"
             ></div>
+            <b-popover
+              :target="bg.key"
+              triggers="hover focus"
+              placement="bottom"
+              :prevent-overflow="false"
+              :content="bg.notes"
+            />
           </div>
         </div>
       </div>
diff --git a/website/client/src/components/hall/heroes.vue b/website/client/src/components/hall/heroes.vue
index 9c1e02dc37..27b7634761 100644
--- a/website/client/src/components/hall/heroes.vue
+++ b/website/client/src/components/hall/heroes.vue
@@ -258,13 +258,22 @@
                 :key="hero._id"
               >
                 <td>
-                  <user-link
+                  <div
                     v-if="hasPermission(hero, 'userSupport')"
-                    :user="hero"
-                    :popover="$t('gamemaster')"
-                    popover-trigger="mouseenter"
-                    popover-placement="right"
-                  />
+                    class="width-content"
+                  >
+                    <user-link
+                      :id="hero._id"
+                      :user="hero"
+                    />
+                    <b-popover
+                      :target="hero._id"
+                      triggers="hover focus"
+                      placement="right"
+                      :prevent-overflow="false"
+                      :content="$t('gamemaster')"
+                    />
+                  </div>
                   <user-link
                     v-else
                     :user="hero"
@@ -302,6 +311,10 @@
   h4.expand-toggle::after {
     margin-left: 5px;
   }
+
+  .width-content {
+    width: fit-content;
+  }
 </style>
 
 <script>
diff --git a/website/client/src/components/settings/site.vue b/website/client/src/components/settings/site.vue
index 60c137e67c..82db3f08f5 100644
--- a/website/client/src/components/settings/site.vue
+++ b/website/client/src/components/settings/site.vue
@@ -128,7 +128,10 @@
         <hr>
       </div>
       <div>
-        <div class="checkbox">
+        <div
+          class="checkbox"
+          id="preferenceAdvancedCollapsed"
+        >
           <label>
             <input
               v-model="user.preferences.advancedCollapsed"
@@ -136,17 +139,22 @@
               class="mr-2"
               @change="set('advancedCollapsed')"
             >
-            <span
-              class="hint"
-              popover-trigger="mouseenter"
-              popover-placement="right"
-              :popover="$t('startAdvCollapsedPop')"
-            >{{ $t('startAdvCollapsed') }}</span>
+            <span class="hint">
+              {{ $t('startAdvCollapsed') }}
+            </span>
+            <b-popover
+              target="preferenceAdvancedCollapsed"
+              triggers="hover focus"
+              placement="right"
+              :prevent-overflow="false"
+              :content="$t('startAdvCollapsedPop')"
+            />
           </label>
         </div>
         <div
           v-if="party.memberCount === 1"
           class="checkbox"
+          id="preferenceDisplayInviteAtOneMember"
         >
           <label>
             <input
@@ -155,12 +163,9 @@
               class="mr-2"
               @change="set('displayInviteToPartyWhenPartyIs1')"
             >
-            <span
-              class="hint"
-              popover-trigger="mouseenter"
-              popover-placement="right"
-              :popover="$t('displayInviteToPartyWhenPartyIs1')"
-            >{{ $t('displayInviteToPartyWhenPartyIs1') }}</span>
+            <span class="hint">
+              {{ $t('displayInviteToPartyWhenPartyIs1') }}
+            </span>
           </label>
         </div>
         <div class="checkbox">
@@ -201,32 +206,47 @@
         </div>
         <hr>
         <button
+          id="buttonShowBailey"
           class="btn btn-primary mr-2 mb-2"
-          popover-trigger="mouseenter"
-          popover-placement="right"
-          :popover="$t('showBaileyPop')"
           @click="showBailey()"
         >
           {{ $t('showBailey') }}
+          <b-popover
+            target="buttonShowBailey"
+            triggers="hover focus"
+            placement="right"
+            :prevent-overflow="false"
+            :content="$t('showBaileyPop')"
+          />
         </button>
         <button
+          id="buttonFCV"
           class="btn btn-primary mr-2 mb-2"
-          popover-trigger="mouseenter"
-          popover-placement="right"
-          :popover="$t('fixValPop')"
           @click="openRestoreModal()"
         >
           {{ $t('fixVal') }}
+          <b-popover
+            target="buttonFCV"
+            triggers="hover focus"
+            placement="right"
+            :prevent-overflow="false"
+            :content="$t('fixValPop')"
+          />
         </button>
         <button
           v-if="user.preferences.disableClasses == true"
+          id="buttonEnableClasses"
           class="btn btn-primary mb-2"
-          popover-trigger="mouseenter"
-          popover-placement="right"
-          :popover="$t('enableClassPop')"
           @click="changeClassForUser(false)"
         >
           {{ $t('enableClass') }}
+          <b-popover
+            target="buttonEnableClasses"
+            triggers="hover focus"
+            placement="right"
+            :prevent-overflow="false"
+            :content="$t('enableClassPop')"
+          />
         </button>
         <hr>
         <day-start-adjustment />
@@ -516,6 +536,10 @@
   input {
     color: $gray-50;
   }
+
+  .checkbox {
+    width: fit-content;
+  }
   .usersettings h5 {
     margin-top: 1em;
   }
diff --git a/website/client/src/components/static/clearBrowserData.vue b/website/client/src/components/static/clearBrowserData.vue
index 02e6ec4314..01d1375c65 100644
--- a/website/client/src/components/static/clearBrowserData.vue
+++ b/website/client/src/components/static/clearBrowserData.vue
@@ -7,13 +7,19 @@
         <br>
         <p class="text-center">
           <button
+            id="buttonClearBrowserData"
             class="btn btn-lg btn-danger"
-            popover-trigger="mouseover"
-            :popover="$t('localStorageClearExplanation')"
             @click="clearLocalStorage()"
           >
             {{ $t('localStorageClear') }}
           </button>
+          <b-popover
+            target="buttonClearBrowserData"
+            triggers="hover focus"
+            placement="right"
+            :prevent-overflow="false"
+            :content="$t('localStorageClearExplanation')"
+          />
         </p>
         <br>
         <p v-html="$t('localStorageTryNext', localStorageTryNext) "></p>
diff --git a/website/client/src/components/userMenu/profileStats.vue b/website/client/src/components/userMenu/profileStats.vue
index 3b6efae101..3e983a2b2b 100644
--- a/website/client/src/components/userMenu/profileStats.vue
+++ b/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',
diff --git a/website/client/src/components/userMenu/stats.vue b/website/client/src/components/userMenu/stats.vue
index d104f1804c..03866a4e18 100644
--- a/website/client/src/components/userMenu/stats.vue
+++ b/website/client/src/components/userMenu/stats.vue
@@ -146,17 +146,19 @@
           :key="stat"
           class="row"
         >
-          <div class="col-4">
-            <span
-              class="hint"
-              :popover-title="$t(statInfo.title)"
-              popover-placement="right"
-              :popover="$t(statInfo.popover)"
-              popover-trigger="mouseenter"
-            >
-              <strong>{{ $t(statInfo.title) }}</strong>
-            </span>
+          <div 
+            class="col-4"
+            :id="statInfo.title"
+          >
+            <strong> {{ $t(statInfo.title)}} </strong>
             <strong>: {{ statsComputed[stat] }}</strong>
+            <b-popover
+              :target="statInfo.title"
+              triggers="hover focus"
+              placement="right"
+              :prevent-overflow="false"
+              :content="$t(statInfo.popover)"
+            />
           </div>
           <div class="col-6">
             <ul class="bonus-stats">
@@ -183,27 +185,38 @@
             </ul>
           </div>
         </div>
-        <div v-if="user.stats.buffs.stealth">
+        <div 
+          v-if="user.stats.buffs.stealth"
+          id="stealthBuff"
+        >
           <strong
             v-once
             class="hint"
-            :popover-title="$t('stealth')"
-            popover-trigger="mouseenter"
-            popover-placement="right"
-            :popover="$t('stealthNewDay')"
           >{{ $t('stealth') }}</strong>
           <strong>: {{ user.stats.buffs.stealth }}&nbsp;</strong>
+          <b-popover
+            target="stealthBuff"
+            triggers="hover focus"
+            placement="right"
+            :prevent-overflow="false"
+            :content="$t('stealthNewDay')"
+          />
         </div>
-        <div v-if="user.stats.buffs.streaks">
+        <div
+          v-if="user.stats.buffs.streaks"
+          id="streaksFrozenBuff"
+        >
           <div>
-            <strong
-              class="hint"
-              popover-title="$t('streaksFrozen')"
-              popover-trigger="mouseenter"
-              popover-placement="right"
-              :popover="$t('streaksFrozenText')"
-            ></strong>
-            {{ $t('streaksFrozen') }}
+            <strong>
+              {{ $t('streaksFrozen') }}
+            </strong>
+            <b-popover
+              target="streaksFrozenBuff"
+              triggers="hover focus"
+              placement="right"
+              :prevent-overflow="false"
+              :content="$t('streaksFrozenText')"
+            />
           </div>
         </div>
       </div>
@@ -237,19 +250,27 @@
             >
               {{ $t('noMoreAllocate') }}
             </p>
-            <p v-if="user.stats.points || userLevel100Plus">
+            <p 
+              v-if="user.stats.points || userLevel100Plus"
+              id="pointAllocation"
+            >
               <strong class="inline">{{ user.stats.points }}&nbsp;</strong>
-              <strong
-                class="hint"
-                popover-trigger="mouseenter"
-                popover-placement="right"
-                :popover="$t('levelPopover')"
-              >{{ $t('unallocated') }}</strong>
+              <strong> {{ $t('unallocated') }} </strong>
+              <b-popover
+                target="pointAllocation"
+                triggers="hover focus"
+                placement="right"
+                :prevent-overflow="false"
+                :content="$t('levelPopover')"
+              />
             </p>
           </div>
           <div>
             <fieldset class="auto-allocate">
-              <div class="checkbox">
+              <div 
+                id="preferenceAutomaticAllocation"
+                class="checkbox"
+              >
                 <label>
                   <input
                     v-model="user.preferences.automaticAllocation"
@@ -259,19 +280,24 @@
                       'preferences.allocationMode': 'taskbased'
                     })"
                   >
-                  <span
-                    class="hint"
-                    popover-trigger="mouseenter"
-                    popover-placement="right"
-                    :popover="$t('autoAllocationPop')"
-                  >{{ $t('autoAllocation') }}</span>
+                  <b-popover
+                    target="preferenceAutomaticAllocation"
+                    triggers="hover focus"
+                    placement="right"
+                    :prevent-overflow="false"
+                    :content="$t('autoAllocationPop')"
+                  />
+                  {{ $t('autoAllocation') }}
                 </label>
               </div>
               <form
                 v-if="user.preferences.automaticAllocation"
                 style="margin-left:1em"
               >
-                <div class="radio">
+                <div 
+                  id="optionFlatAllocation"
+                  class="radio"
+                >
                   <label>
                     <input
                       v-model="user.preferences.allocationMode"
@@ -280,15 +306,22 @@
                       value="flat"
                       @change="set({'preferences.allocationMode': 'flat'})"
                     >
-                    <span
-                      class="hint"
-                      popover-trigger="mouseenter"
-                      popover-placement="right"
-                      :popover="$t('evenAllocationPop')"
-                    >{{ $t('evenAllocation') }}</span>
+                    <span class="hint">
+                      {{ $t('evenAllocation') }}
+                    </span>
+                    <b-popover
+                      target="optionFlatAllocation"
+                      triggers="hover focus"
+                      placement="right"
+                      :prevent-overflow="false"
+                      :content="$t('evenAllocationPop')"
+                    />
                   </label>
                 </div>
-                <div class="radio">
+                <div 
+                  id="optionClassAllocation"
+                  class="radio"
+                >
                   <label>
                     <input
                       v-model="user.preferences.allocationMode"
@@ -297,47 +330,63 @@
                       value="classbased"
                       @change="set({'preferences.allocationMode': 'classbased'})"
                     >
-                    <span
-                      class="hint"
-                      popover-trigger="mouseenter"
-                      popover-placement="right"
-                      :popover="$t('classAllocationPop')"
-                    >{{ $t('classAllocation') }}</span>
+                    <span class="hint">
+                      {{ $t('classAllocation') }}
+                    </span>
+                    <b-popover
+                      target="optionClassAllocation"
+                      triggers="hover focus"
+                      placement="right"
+                      :prevent-overflow="false"
+                      :content="$t('classAllocationPop')"
+                    />
                   </label>
                 </div>
-                <div class="radio">
+                <div 
+                  id="optionTaskAllocation"
+                  class="radio"
+                >
                   <label>
                     <input
                       v-model="user.preferences.allocationMode"
                       type="radio"
                       name="allocationMode"
-                      value="taskbased"
+                      value="classbased"
                       @change="set({'preferences.allocationMode': 'taskbased'})"
                     >
-                    <span
-                      class="hint"
-                      popover-trigger="mouseenter"
-                      popover-placement="right"
-                      :popover="$t('taskAllocationPop')"
-                    >{{ $t('taskAllocation') }}</span>
+                    <span class="hint">
+                      {{ $t('taskAllocation') }}
+                    </span>
+                    <b-popover
+                      target="optionTaskAllocation"
+                      triggers="hover focus"
+                      placement="right"
+                      :prevent-overflow="false"
+                      :content="$t('taskAllocationPop')"
+                    />
                   </label>
                 </div>
               </form>
               <div
                 v-if="user.preferences.automaticAllocation
                   && !(user.preferences.allocationMode === 'taskbased') && (user.stats.points > 0)"
+                id="buttonDistributePoints"
               >
                 <button
                   class="btn btn-primary btn-xs"
-                  popover-trigger="mouseenter"
-                  popover-placement="right"
-                  :popover="$t('distributePointsPop')"
                   @click="allocateNow({})"
                 >
                   <span class="glyphicon glyphicon-download"></span>
                   &nbsp;
                   {{ $t('distributePoints') }}
                 </button>
+                <b-popover
+                  target="buttonDistributePoints"
+                  triggers="hover focus"
+                  placement="right"
+                  :prevent-overflow="false"
+                  :content="$t('distributePointsPop')"
+                />
               </div>
             </fieldset>
           </div>
@@ -346,28 +395,35 @@
             :key="stat"
             class="row"
           >
-            <div class="col-8">
-              <span
-                class="hint"
-                popover-trigger="mouseenter"
-                popover-placement="right"
-                :popover="$t(statInfo.popover)"
-              ></span>
+            <div
+              :id="`${stat}-info`"
+              class="col-8"
+            >
               {{ $t(statInfo.title) + user.stats[stat] }}
+              <b-popover
+                :target="`${stat}-info`"
+                triggers="hover focus"
+                placement="right"
+                :prevent-overflow="false"
+                :content="$t(statInfo.popover)"
+              />
             </div>
             <div
               v-if="user.stats.points"
+              :id="`${stat}-allocate`"
               class="col-4"
               @click="allocate(stat)"
             >
-              <button
-                class="btn btn-primary"
-                popover-trigger="mouseenter"
-                popover-placement="right"
-                :popover="$t(statInfo.allocatepop)"
-              >
+              <button class="btn btn-primary">
                 +
               </button>
+              <b-popover
+                :target="`${stat}-allocate`"
+                triggers="hover focus"
+                placement="right"
+                :prevent-overflow="false"
+                :content="$t(statInfo.allocatePop)"
+              />
             </div>
           </div>
         </div>