Make tooltips render automatically

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,16 @@
 <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">
+			<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>
+
+			<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>
 	</div>
@@ -30,7 +34,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 +65,48 @@ 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);
+		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;
+			}
+		}
+	}
+ });
+
+onBeforeUnmount(() => {
+	if (stickyTooltip.value) {
+		stickyTooltip.value.dispose();
+		stickyTooltip.value = null;
+	}
+});
 </script>