Display an info tooltip if URLs cannot be copied

pages/playlists/[playlistId]/snapshots/show/[commitSha].vue

@@ -11,7 +11,8 @@ const route = useRoute();
 const toast = useToast();
 
 const { copy } = useClipboard();
-const { canCopyToClipboard } = useCanCopyToClipboard();
+const { isSupported, clipboardWirtePermission, canCopyToClipboard } =
+  useCanCopyToClipboard();
 
 const playlistId = route.params.playlistId as string;
 const commitSha = route.params.commitSha as string;
@@ -46,6 +47,14 @@ const totalTrackDuration = computed(() =>
   )
 );
 
+const copyTrackUrlsTooltip = computed(() =>
+  !isSupported.value
+    ? "Your browser doesn't support this feature"
+    : clipboardWirtePermission.value !== 'granted'
+    ? 'You need to grant this website permission to copy to clipboard'
+    : null
+);
+
 const numberFormatter = new Intl.NumberFormat('en-US');
 const humanizeNumber = (num: number) => numberFormatter.format(num);
 
@@ -86,12 +95,20 @@ const copyTrackUrls = async () => {
         </ul>
         <div class="my-2 flex justify-content-center">
           <Button
-            v-if="canCopyToClipboard"
+            v-tooltip.hover="copyTrackUrlsTooltip"
             class="p-button-text"
             label="Copy track URLs"
             icon="pi pi-clone"
+            :disabled="!canCopyToClipboard"
             @click="copyTrackUrls"
           />
+          <span
+            v-if="!canCopyToClipboard"
+            v-tooltip.top="copyTrackUrlsTooltip"
+            class="flex align-items-center text-blue-300"
+          >
+            <i class="pi pi-info-circle"></i>
+          </span>
           <a
             id="export-to-json"
             class="p-component p-button p-button-text"

plugins/primevue.ts

@@ -2,8 +2,10 @@ import { defineNuxtPlugin } from '#app';
 
 import PrimeVue from 'primevue/config';
 import ToastService from 'primevue/toastservice';
+import Tooltip from 'primevue/tooltip';
 
 export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.use(PrimeVue, { ripple: true });
   nuxtApp.vueApp.use(ToastService);
+  nuxtApp.vueApp.directive('tooltip', Tooltip);
 });