diff --git a/docs/presentation.md b/docs/presentation.md
index 7dee1eb3..49595164 100644
--- a/docs/presentation.md
+++ b/docs/presentation.md
@@ -61,9 +61,16 @@ Stateful components can mutate and/or react to state changes (e.g., user selecti
 
 📖 Refer to [architecture.md | Application State](./architecture.md#application-state) for an overview of event handling and [application.md | Application State](./presentation.md#application-state) for an in-depth understanding of state management in the application layer.
 
-## Modals
+## Shared UI components
 
-- [ModalDialog.vue](./../src/presentation/components/Shared/Modal/ModalDialog.vue) is a shared component utilized for rendering modal windows.
+Shared UI components promote consistency and simplifies the creation of the front-end.
+
+In order to maintain portability and easy maintainability, the preference is towards using homegrown components over third-party ones or comprehensive UI frameworks like Quasar.
+
+Shared components include:
+
+- [ModalDialog.vue](./../src/presentation/components/Shared/Modal/ModalDialog.vue) is utilized for rendering modal windows.
+- [TooltipWrapper.vue](./../src/presentation/components/Shared/TooltipWrapper.vue) acts as a wrapper for rendering tooltips.
 
 ## Sass naming convention
 
diff --git a/src/presentation/components/Code/CodeButtons/Instructions/CodeInstruction.vue b/src/presentation/components/Code/CodeButtons/Instructions/CodeInstruction.vue
index 012756d6..8137c92a 100644
--- a/src/presentation/components/Code/CodeButtons/Instructions/CodeInstruction.vue
+++ b/src/presentation/components/Code/CodeButtons/Instructions/CodeInstruction.vue
@@ -2,20 +2,28 @@
   <span class="code-wrapper">
     <span class="dollar">$</span>
     <code><slot /></code>
-    <font-awesome-icon
-      class="copy-button"
-      :icon="['fas', 'copy']"
-      @click="copyCode"
-      v-tooltip.top-center="'Copy'"
-    />
+    <TooltipWrapper>
+      <font-awesome-icon
+        class="copy-button"
+        :icon="['fas', 'copy']"
+        @click="copyCode"
+      />
+      <template v-slot:tooltip>
+        Copy
+      </template>
+    </TooltipWrapper>
   </span>
 </template>
 
 <script lang="ts">
 import { defineComponent, useSlots } from 'vue';
 import { Clipboard } from '@/infrastructure/Clipboard';
+import TooltipWrapper from '@/presentation/components/Shared/TooltipWrapper.vue';
 
 export default defineComponent({
+  components: {
+    TooltipWrapper,
+  },
   setup() {
     const slots = useSlots();
 
diff --git a/src/presentation/components/Code/CodeButtons/Instructions/InstructionList.vue b/src/presentation/components/Code/CodeButtons/Instructions/InstructionList.vue
index ac7523f2..45f673eb 100644
--- a/src/presentation/components/Code/CodeButtons/Instructions/InstructionList.vue
+++ b/src/presentation/components/Code/CodeButtons/Instructions/InstructionList.vue
@@ -26,21 +26,27 @@
         >
           <div class="step__action">
             <span>{{ step.action.instruction }}</span>
-            <font-awesome-icon
-              v-if="step.action.details"
-              class="explanation"
-              :icon="['fas', 'info-circle']"
-              v-tooltip.top-center="step.action.details"
-            />
+            <TooltipWrapper v-if="step.action.details">
+              <font-awesome-icon
+                class="explanation"
+                :icon="['fas', 'info-circle']"
+              />
+              <template v-slot:tooltip>
+                <div v-html="step.action.details" />
+              </template>
+            </TooltipWrapper>
           </div>
           <div v-if="step.code" class="step__code">
             <CodeInstruction>{{ step.code.instruction }}</CodeInstruction>
-            <font-awesome-icon
-              v-if="step.code.details"
-              class="explanation"
-              :icon="['fas', 'info-circle']"
-              v-tooltip.top-center="step.code.details"
-            />
+            <TooltipWrapper v-if="step.code.details">
+              <font-awesome-icon
+                class="explanation"
+                :icon="['fas', 'info-circle']"
+              />
+              <template v-slot:tooltip>
+                <div v-html="step.code.details" />
+              </template>
+            </TooltipWrapper>
           </div>
         </li>
       </ol>
@@ -53,6 +59,7 @@ import {
   defineComponent, PropType, computed,
 } from 'vue';
 import { OperatingSystem } from '@/domain/OperatingSystem';
+import TooltipWrapper from '@/presentation/components/Shared/TooltipWrapper.vue';
 import { useApplication } from '@/presentation/components/Shared/Hooks/UseApplication';
 import CodeInstruction from './CodeInstruction.vue';
 import { IInstructionListData } from './InstructionListData';
@@ -60,6 +67,7 @@ import { IInstructionListData } from './InstructionListData';
 export default defineComponent({
   components: {
     CodeInstruction,
+    TooltipWrapper,
   },
   props: {
     data: {
diff --git a/src/presentation/components/Scripts/Menu/Selector/TheSelector.vue b/src/presentation/components/Scripts/Menu/Selector/TheSelector.vue
index cc4ad873..34819947 100644
--- a/src/presentation/components/Scripts/Menu/Selector/TheSelector.vue
+++ b/src/presentation/components/Scripts/Menu/Selector/TheSelector.vue
@@ -1,49 +1,73 @@
 <template>
   <MenuOptionList label="Select">
-    <MenuOptionListItem
-      label="None"
-      :enabled="currentSelection !== SelectionType.None"
-      @click="selectType(SelectionType.None)"
-      v-tooltip="
-        'Deselect all selected scripts.<br/>'
-          + '💡 Good start to dive deeper into tweaks and select only what you want.'
-      "
-    />
-    <MenuOptionListItem
-      label="Standard"
-      :enabled="currentSelection !== SelectionType.Standard"
-      @click="selectType(SelectionType.Standard)"
-      v-tooltip="
-        '🛡️ Balanced for privacy and functionality.<br/>'
-          + 'OS and applications will function normally.<br/>'
-          + '💡 Recommended for everyone'"
-    />
-    <MenuOptionListItem
-      label="Strict"
-      :enabled="currentSelection !== SelectionType.Strict"
-      @click="selectType(SelectionType.Strict)"
-      v-tooltip="
-        '🚫 Stronger privacy, disables risky functions that may leak your data.<br/>'
-          + '⚠️ Double check to remove scripts where you would trade functionality for privacy<br/>'
-          + '💡 Recommended for daily users that prefers more privacy over non-essential functions'
-      "
-    />
-    <MenuOptionListItem
-      label="All"
-      :enabled="currentSelection !== SelectionType.All"
-      @click="selectType(SelectionType.All)"
-      v-tooltip="
-        '🔒 Strongest privacy, disabling any functionality that may leak your data.<br/>'
-          + '🛑 Not designed for daily users, it will break important functionalities.<br/>'
-          + '💡 Only recommended for extreme use-cases like crime labs where no leak is acceptable'
-      "
-    />
+    <TooltipWrapper>
+      <!-- None -->
+      <MenuOptionListItem
+        label="None"
+        :enabled="currentSelection !== SelectionType.None"
+        @click="selectType(SelectionType.None)"
+      />
+      <template v-slot:tooltip>
+        Deselect all selected scripts.
+        <br />
+        💡 Good start to dive deeper into tweaks and select only what you want.
+      </template>
+    </TooltipWrapper>
+
+    <!-- Standard -->
+    <TooltipWrapper>
+      <MenuOptionListItem
+        label="Standard"
+        :enabled="currentSelection !== SelectionType.Standard"
+        @click="selectType(SelectionType.Standard)"
+      />
+      <template v-slot:tooltip>
+        🛡️ Balanced for privacy and functionality.
+        <br />
+        OS and applications will function normally.
+        <br />
+        💡 Recommended for everyone
+      </template>
+    </TooltipWrapper>
+
+    <!-- Strict -->
+    <TooltipWrapper>
+      <MenuOptionListItem
+        label="Strict"
+        :enabled="currentSelection !== SelectionType.Strict"
+        @click="selectType(SelectionType.Strict)"
+      />
+      <template v-slot:tooltip>
+        🚫 Stronger privacy, disables risky functions that may leak your data.
+        <br />
+        ⚠️ Double check to remove scripts where you would trade functionality for privacy
+        <br />
+        💡 Recommended for daily users that prefers more privacy over non-essential functions
+      </template>
+    </TooltipWrapper>
+
+    <!-- All -->
+    <TooltipWrapper>
+      <MenuOptionListItem
+        label="All"
+        :enabled="currentSelection !== SelectionType.All"
+        @click="selectType(SelectionType.All)"
+      />
+      <template v-slot:tooltip>
+        🔒 Strongest privacy, disabling any functionality that may leak your data.
+        <br />
+        🛑 Not designed for daily users, it will break important functionalities.
+        <br />
+        💡 Only recommended for extreme use-cases like crime labs where no leak is acceptable
+      </template>
+    </TooltipWrapper>
   </MenuOptionList>
 </template>
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
 import { useCollectionState } from '@/presentation/components/Shared/Hooks/UseCollectionState';
+import TooltipWrapper from '@/presentation/components/Shared/TooltipWrapper.vue';
 import { ICategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
 import MenuOptionList from '../MenuOptionList.vue';
 import MenuOptionListItem from '../MenuOptionListItem.vue';
@@ -53,6 +77,7 @@ export default defineComponent({
   components: {
     MenuOptionList,
     MenuOptionListItem,
+    TooltipWrapper,
   },
   setup() {
     const { modifyCurrentState, onStateChange, events } = useCollectionState();
diff --git a/src/presentation/components/Shared/TooltipWrapper.vue b/src/presentation/components/Shared/TooltipWrapper.vue
new file mode 100644
index 00000000..e4b35eec
--- /dev/null
+++ b/src/presentation/components/Shared/TooltipWrapper.vue
@@ -0,0 +1,65 @@
+<!--
+  This component acts as a wrapper for the v-tooltip to solve the following:
+    - Direct inclusion of inline HTML in tooltip components has challenges such as
+      - absence of linting or editor support,
+      - involves cumbersome string concatenation.
+      This component caters to these issues by permitting HTML usage in a slot.
+    - It provides an abstraction for a third-party component which simplifies
+      switching and acts as an anti-corruption layer.
+-->
+
+<template>
+  <div class="tooltip-container" v-tooltip.top-center="tooltipHtml">
+    <slot />
+    <div class="tooltip-content" ref="tooltipWrapper">
+      <slot name="tooltip" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent, ref, onMounted, onUpdated, nextTick,
+} from 'vue';
+
+export default defineComponent({
+  setup() {
+    const tooltipWrapper = ref<HTMLElement | undefined>();
+    const tooltipHtml = ref<string | undefined>();
+
+    onMounted(() => updateTooltipHTML());
+
+    onUpdated(() => {
+      nextTick(() => {
+        updateTooltipHTML();
+      });
+    });
+
+    function updateTooltipHTML() {
+      const newValue = tooltipWrapper.value?.innerHTML;
+      const oldValue = tooltipHtml.value;
+      if (newValue === oldValue) {
+        return;
+      }
+      tooltipHtml.value = newValue;
+    }
+
+    return {
+      tooltipWrapper,
+      tooltipHtml,
+    };
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@use "@/presentation/assets/styles/main" as *;
+
+.tooltip-container {
+  display: inline-block;
+}
+
+.tooltip-content {
+  display: none;
+}
+</style>