diff --git a/nuxt.config.ts b/nuxt.config.ts
index c13fe7d..c72552c 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -16,6 +16,7 @@ export default defineNuxtConfig({
 					]
 				},
 				toc: {
+					// @ts-ignore
 					title: "Table of Contents",
 					depth: 4, // include h4 headings
 					searchDepth: 2
@@ -51,6 +52,9 @@ export default defineNuxtConfig({
 	},
 	srcDir: "src/",
 	ssr: false,
+	typescript: {
+		typeCheck: true
+	},
 	vite: {
 		plugins: [
 			ViteComponents({
diff --git a/package-lock.json b/package-lock.json
index 787b3af..8ba99e5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -30,7 +30,8 @@
 				"nuxt": "^3.14.1592",
 				"typescript": "^5.7.2",
 				"unplugin-icons": "^22.1.0",
-				"unplugin-vue-components": "^28.4.1"
+				"unplugin-vue-components": "^28.4.1",
+				"vue-tsc": "^2.2.8"
 			}
 		},
 		"node_modules/@ampproject/remapping": {
@@ -12502,6 +12503,23 @@
 				"vue": "^3.2.0"
 			}
 		},
+		"node_modules/vue-tsc": {
+			"version": "2.2.8",
+			"resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.2.8.tgz",
+			"integrity": "sha512-jBYKBNFADTN+L+MdesNX/TB3XuDSyaWynKMDgR+yCSln0GQ9Tfb7JS2lr46s2LiFUT1WsmfWsSvIElyxzOPqcQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@volar/typescript": "~2.4.11",
+				"@vue/language-core": "2.2.8"
+			},
+			"bin": {
+				"vue-tsc": "bin/vue-tsc.js"
+			},
+			"peerDependencies": {
+				"typescript": ">=5.0.0"
+			}
+		},
 		"node_modules/web-namespaces": {
 			"version": "2.0.1",
 			"dev": true,
diff --git a/package.json b/package.json
index b702593..b87c188 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,8 @@
 		"nuxt": "^3.14.1592",
 		"typescript": "^5.7.2",
 		"unplugin-icons": "^22.1.0",
-		"unplugin-vue-components": "^28.4.1"
+		"unplugin-vue-components": "^28.4.1",
+		"vue-tsc": "^2.2.8"
 	},
 	"trustedDependencies": [
 		"@parcel/watcher"
diff --git a/src/app.vue b/src/app.vue
index d10b906..4a030e9 100644
--- a/src/app.vue
+++ b/src/app.vue
@@ -6,7 +6,9 @@
 </template>
 
 <script setup lang="ts">
-const bootstrap = useNuxtApp().$bootstrap;
+import { useStateStore } from "@/stores/stateStore";
+
+const store = useStateStore();
 
 useHead({
 	titleTemplate: (titleChunk: string | undefined): string | null => {
@@ -16,12 +18,7 @@ useHead({
 
 // Access bootstrap after the DOM is ready
 onMounted(() => {
-	// Initialize popovers
-	const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
-	const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
-
-	// Initialize tooltips
-	const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
-	const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
+	// @ts-ignore
+	store.initBootstrap();
 });
 </script>
diff --git a/src/components/BootstrapHoverable.vue b/src/components/BootstrapHoverable.vue
new file mode 100644
index 0000000..34dd2c5
--- /dev/null
+++ b/src/components/BootstrapHoverable.vue
@@ -0,0 +1,21 @@
+<template>
+	<slot />
+</template>
+
+<script setup lang="ts">
+import { useStateStore } from "@/stores/stateStore";
+
+const store = useStateStore();
+
+// Initialize Bootstrap hoverables after the DOM is ready
+onMounted(() => {
+	// @ts-ignore
+	store.initBootstrap();
+});
+
+// Or its updated
+onUpdated(() => {
+	// @ts-ignore
+	store.initBootstrap();
+});
+</script>
diff --git a/src/components/articles/TableOfContents.vue b/src/components/articles/TableOfContents.vue
index 6ff0efd..3fd66e2 100644
--- a/src/components/articles/TableOfContents.vue
+++ b/src/components/articles/TableOfContents.vue
@@ -6,7 +6,7 @@
 				<a href="#">Overview</a>
 			</li>
 		</ul>
-		<ArticlesTableOfContentsLink :links="toc.links" :first="true" class="font-smaller mb-0" />
+		<ArticlesTableOfContentsLink :links="toc.links" :first="true" class="font-smaller" />
 	</aside>
 </template>
 
diff --git a/src/components/articles/TableOfContentsLink.vue b/src/components/articles/TableOfContentsLink.vue
index 4deb889..32fb608 100644
--- a/src/components/articles/TableOfContentsLink.vue
+++ b/src/components/articles/TableOfContentsLink.vue
@@ -1,5 +1,5 @@
 <template>
-	<ul>
+	<ul class="mb-0">
 		<template v-for="link in links" :key="link.id">
 			<li>
 				<a :href="'#' + link.id">{{ link.text }}</a>
diff --git a/src/components/content/ProsePre.vue b/src/components/content/ProsePre.vue
index 8bfcf29..29a2cd4 100644
--- a/src/components/content/ProsePre.vue
+++ b/src/components/content/ProsePre.vue
@@ -1,11 +1,17 @@
 <template>
 	<div class="position-relative">
 		<div @click="copyCode" class="position-absolute" style="top: 10px; right: 10px;">
-			<template v-if="copied">
-				<code>Copied!</code>
-			</template>
-			<button class="copy text-secondary" title="Copy code">
-				<IFaClone />
+			<BootstrapHoverable>
+				<button class="copy text-secondary" :class="copied ? 'd-none' : ''" data-bs-toggle="tooltip"
+					data-bs-placement="top" data-bs-title="Copy to clipboard">
+					<IFaClone />
+				</button>
+			</BootstrapHoverable>
+
+			<button class="copy text-secondary" :class="!copied ? 'd-none' : ''" data-bs-toggle="tooltip"
+				data-bs-placement="top" data-bs-title="Copied!" data-bs-trigger="manual" data-bs-show
+				ref="stickyTooltipElement">
+				<IFaCheck class="text-success" />
 			</button>
 		</div>
 		<pre :class="$props.class"><code class="language-{{ language }}"><slot /></code></pre>
@@ -30,7 +36,9 @@ button.copy:hover {
 </style>
 
 <script setup lang="ts">
-import { ref } from "vue"
+import { nextTick, ref, watch } from "vue"
+
+const bootstrap = useNuxtApp().$bootstrap;
 
 defineProps({
 	code: {
@@ -59,19 +67,41 @@ defineProps({
 	}
 });
 
-const copied = ref(false);
+const copied = ref<boolean>(false);
 
 const copyCode = async (e: Event) => {
 	try {
 		const target = e.currentTarget as HTMLElement;
 		const element = target.nextElementSibling as HTMLPreElement | null;
-		const textToCopy = element ? element.textContent.trim() : "";
+		const textToCopy = element ? element.textContent!.trim() : "";
 
 		await navigator.clipboard.writeText(textToCopy);
 		copied.value = true;
 		setTimeout(() => (copied.value = false), 2000);
 	} catch (err) {
-		console.error('Failed to copy:', err)
+		console.error('Failed to copy:', err);
 	}
 }
+
+// Clicked tooltip
+const stickyTooltip = ref<any>();
+const stickyTooltipElement = ref<HTMLInputElement | null>(null);
+watch(copied, (newValue, oldValue) => {
+	if (newValue !== oldValue) {
+		if (newValue) {
+			// Ensure the DOM is updated before executing
+			nextTick(() => {
+				// @ts-ignore
+				stickyTooltip.value = new bootstrap.Tooltip(stickyTooltipElement.value, { trigger: "manual" });
+				stickyTooltip.value.show();
+			});
+		}
+		else {
+			if (stickyTooltip.value) {
+				stickyTooltip.value.dispose();
+				stickyTooltip.value = null;
+			}
+		}
+	}
+});
 </script>
diff --git a/src/pages/articles/[slug].vue b/src/pages/articles/[slug].vue
index 92d3922..d959f83 100644
--- a/src/pages/articles/[slug].vue
+++ b/src/pages/articles/[slug].vue
@@ -62,6 +62,7 @@
 
 <script setup lang="ts">
 import type { ContentCollectionItem } from "@nuxt/content";
+import { useStateStore } from "@/stores/stateStore";
 
 const { params } = useRoute();
 
@@ -70,6 +71,12 @@ const { data: article } = await useAsyncData<ContentCollectionItem | null>(
 	() => queryCollection("content").path("/articles/" + params.slug).first()
 );
 
+const store = useStateStore();
+
+onMounted(() => {
+	store.initBootstrap();
+});
+
 useSeoMeta({
 	title: article.value?.title,
 	description: article.value?.description
diff --git a/src/plugins/bootstrap.client.ts b/src/plugins/bootstrap.client.ts
index 926ac03..a7ac240 100644
--- a/src/plugins/bootstrap.client.ts
+++ b/src/plugins/bootstrap.client.ts
@@ -1,5 +1,6 @@
+// @ts-ignore
 import bootstrap from "bootstrap/dist/js/bootstrap.bundle.min";
 
 export default defineNuxtPlugin(nuxtApp => {
 	nuxtApp.provide("bootstrap", bootstrap);
-})
+});
diff --git a/src/stores/stateStore.ts b/src/stores/stateStore.ts
index 6c8334e..4554339 100644
--- a/src/stores/stateStore.ts
+++ b/src/stores/stateStore.ts
@@ -1,6 +1,9 @@
 import { defineStore } from "pinia"
 import { ref } from "vue";
 
+// @ts-ignore
+import bootstrap from "bootstrap/dist/js/bootstrap.bundle.min";
+
 export const useStateStore = defineStore("state", () => {
 
 	const colorMode = ref<string>("light");
@@ -10,7 +13,22 @@ export const useStateStore = defineStore("state", () => {
 		html.setAttribute('data-bs-theme', colorMode.value);
 	};
 
-	return { colorMode, toggleColorMode }
+	const popoverList = ref<any[]>([]);
+	const tooltipList = ref<any[]>([]);
+
+	const initBootstrap = (): void => {
+		// Initialize popovers
+		popoverList.value.forEach(popover => popover.dispose());
+		const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
+		popoverList.value = [...popoverTriggerList].map(popover => new bootstrap.Popover(popover));
+
+		// Initialize tooltips
+		tooltipList.value.forEach(tooltip => tooltip.dispose());
+		const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]:not(data-bs-show)');
+		tooltipList.value = [...tooltipTriggerList].map(tooltip => new bootstrap.Tooltip(tooltip));
+	};
+
+	return { colorMode, toggleColorMode, initBootstrap }
 }, {
 	persist: process.env.NODE_ENV === 'development' ? true : false,
 })
diff --git a/tsconfig.json b/tsconfig.json
index 6268c78..947f6b6 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,10 +1,4 @@
 {
 	// https://nuxt.com/docs/guide/concepts/typescript
-	"extends": "./.nuxt/tsconfig.json",
-	"compilerOptions": {
-		"types": [
-			"bootstrap",
-			"unplugin-icons/types/vue"
-		]
-	}
+	"extends": "./.nuxt/tsconfig.json"
 }