Make tooltips render automatically

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({

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,

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"

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
+	// @ts-ignore
-	const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
+	store.initBootstrap();
-	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));
 });
 </script>

src/components/BootstrapClickable.vue

@@ -0,0 +1,18 @@
+<template>
+	<span ref="wrapper">
+		<slot />
+	</span>
+</template>
+
+<script setup lang="ts">
+import { useStateStore } from "@/stores/stateStore";
+
+const store = useStateStore();
+const wrapper = ref<HTMLElement | null>(null);
+
+// Initialize Bootstrap hoverables after the DOM is ready
+onMounted(() => {
+	// @ts-ignore
+	store.stickyBootstrap(wrapper?.value?.firstElementChild);
+});
+</script>

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>

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>
 

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>

src/components/content/ProsePre.vue

@@ -1,12 +1,20 @@
 <template>
 	<div class="position-relative">
 		<div @click="copyCode" class="position-absolute" style="top: 10px; right: 10px;">
-			<template v-if="copied">
+			<template v-if="!copied">
-				<code>Copied!</code>
+				<BootstrapHoverable>
-			</template>
+					<button class="copy text-secondary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Copy to clipboard">
-			<button class="copy text-secondary" title="Copy code">
 						<IFaClone />
 					</button>
+				</BootstrapHoverable>
+			</template>
+			<template v-else>
+				<BootstrapClickable>
+					<button class="copy text-secondary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Copied!">
+						<IFaCheck class="text-success" />
+					</button>
+				</BootstrapClickable>
+			</template>
 		</div>
 		<pre :class="$props.class"><code class="language-{{ language }}"><slot /></code></pre>
 	</div>
@@ -65,7 +73,7 @@ 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;

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

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);
-})
+});

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,28 @@ 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"]');
+		tooltipList.value = [...tooltipTriggerList].map(tooltip => new bootstrap.Tooltip(tooltip));
+	};
+
+	const stickyBootstrap = (tooltip: Element | null | undefined): void => {
+		tooltipList.value.forEach(tooltip => tooltip.dispose());
+		tooltipList.value = [new bootstrap.Tooltip(tooltip, { trigger: "manual" })];
+		tooltipList.value[0].show();
+	};
+
+	return { colorMode, toggleColorMode, initBootstrap, stickyBootstrap }
 }, {
 	persist: process.env.NODE_ENV === 'development' ? true : false,
 })

tsconfig.json

@@ -1,10 +1,4 @@
 {
 	// https://nuxt.com/docs/guide/concepts/typescript
-	"extends": "./.nuxt/tsconfig.json",
+	"extends": "./.nuxt/tsconfig.json"
-	"compilerOptions": {
-		"types": [
-			"bootstrap",
-			"unplugin-icons/types/vue"
-		]
-	}
 }