perf: Use cooltipz-class stylesheet from cooltipz-css v2.4.0 for improved performance

Author: jackdomleo7

app/components/SiteFooter.vue

@@ -13,7 +13,7 @@
     </ul>
     <ul class="footer__social">
       <li v-for="socialLink in socialLinks" :key="socialLink.key">
-        <nuxt-link :href="socialLink.value" target="_blank" rel="noopener noreferrer" data-cooltipz-dir="top" :aria-label="socialLink.key">
+        <nuxt-link :href="socialLink.value" target="_blank" rel="noopener noreferrer" class="cooltipz--top" :aria-label="socialLink.key">
           <Icon class="footer__social-icon" :name="`custom:${socialLink.key.toLowerCase()}`" mode="svg" />
           <span class="sr-only">{{ socialLink.key }}</span>
         </nuxt-link>

app/pages/blog/[year]/[slug].vue

@@ -25,19 +25,19 @@
       </p>
       <ul class="article__share">
         <li>
-          <a :href="`https://twitter.com/intent/tweet?text=${article.title} by Jack Domleo&url=${config.public.BASE_URL}${$route.path}`" rel="nofollow noopener" target="_blank" data-cooltipz-dir="top" aria-label="Share on X">
+          <a :href="`https://twitter.com/intent/tweet?text=${article.title} by Jack Domleo&url=${config.public.BASE_URL}${$route.path}`" rel="nofollow noopener" target="_blank" class="cooltipz--top" aria-label="Share on X">
             <Icon name="custom:twitter" mode="svg" />
             <span class="sr-only">Share on X/Twitter</span>
           </a>
         </li>
         <li>
-          <a :href="`https://www.linkedin.com/shareArticle?mini=true&url=${config.public.BASE_URL}${$route.path}&title=${article.title}&summary=${article.description} by Jack Domleo&source=${config.public.BASE_URL}${$route.path}`" rel="nofollow noopener" target="_blank" data-cooltipz-dir="top" aria-label="Share on LinkedIn">
+          <a :href="`https://www.linkedin.com/shareArticle?mini=true&url=${config.public.BASE_URL}${$route.path}&title=${article.title}&summary=${article.description} by Jack Domleo&source=${config.public.BASE_URL}${$route.path}`" rel="nofollow noopener" target="_blank" class="cooltipz--top" aria-label="Share on LinkedIn">
             <Icon name="custom:linkedin" mode="svg" />
             <span class="sr-only">Share on LinkedIn</span>
           </a>
         </li>
         <li>
-          <button data-cooltipz-dir="top" aria-label="Copy link" @click="copyLink()">
+          <button class="cooltipz--top" aria-label="Copy link" @click="copyLink()">
             <Icon name="custom:link" mode="svg" />
             <span class="sr-only">Copy link</span>
           </button>

nuxt.config.ts

@@ -19,7 +19,7 @@ export default defineNuxtConfig({
   },
   css: [
     'modern-normalize/modern-normalize.css',
-    'cooltipz-css/src/cooltipz.scss',
+    'cooltipz-css/src/cooltipz-classes.scss',
     '~/assets/styles/main.scss'
   ],
   site: {

package.json

@@ -28,7 +28,7 @@
     "@nuxtjs/sitemap": "^7.4.3",
     "@vueuse/core": "^13.6.0",
     "better-sqlite3": "^12.2.0",
-    "cooltipz-css": "^2.3.1",
+    "cooltipz-css": "^2.4.0",
     "dayjs": "^1.11.13",
     "i": "^0.3.7",
     "modern-normalize": "^3.0.1",