style: Tooltips

package.json

@@ -9,6 +9,7 @@
     "devDependencies": {
         "@iconify/json": "^2.2.83",
         "@inertiajs/vue3": "^1.0.0",
+        "@release-it/conventional-changelog": "^7.0.0",
         "@tailwindcss/forms": "^0.5.3",
         "@vitejs/plugin-vue": "^4.0.0",
         "autoprefixer": "^10.4.12",
@@ -19,16 +20,16 @@
         "laravel-vite-plugin": "^0.7.5",
         "postcss": "^8.4.18",
         "pusher-js": "^8.2.0",
+        "release-it": "^16.1.0",
         "tailwindcss": "^3.2.1",
         "vite": "^4.0.0",
         "vitest": "^0.33.0",
-        "vue": "^3.2.41",
-        "release-it": "^16.1.0",
-        "@release-it/conventional-changelog": "^7.0.0"
+        "vue": "^3.2.41"
     },
     "dependencies": {
         "@iconify/vue": "^4.1.1",
         "@videojs-player/vue": "^1.0.0",
+        "floating-vue": "^2.0.0-beta.24",
         "hls.js": "^1.4.8",
         "moment": "^2.29.4",
         "moment-duration-format": "^2.3.2",

resources/js/Components/Dashboard/VideoCard.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { Link } from '@inertiajs/vue3'
+import {Link} from '@inertiajs/vue3'
 import {computed, ref} from 'vue'
 import moment from 'moment'
 import DeleteSlipModal from '@/Components/Dashboard/DeleteSlipModal.vue'
@@ -66,20 +66,20 @@ const TypeIcon = computed(() => {
       <div class="flex justify-between mt-2 px-2">
         <!-- Top Left Icons -->
         <div class="flex flex-row text-gray-200 rounded-lg text-center text-sm gap-3">
-          <p class="bg-neutral-950 bg-opacity-75 rounded-lg p-1 text-gray-200 text-sm">
+          <p v-tooltip="{content: 'Duration', placement:'bottom'}" class="bg-neutral-950 bg-opacity-75 rounded-lg p-1 text-gray-200 text-sm">
             {{ formattedDuration }}
           </p>
         </div>
         <!-- TimeStamp -->
         <div class="flex flex-row gap-3">
           <div>
-            <p class="bg-neutral-950 bg-opacity-75 rounded-lg p-1 text-gray-200 text-sm">
+            <p v-tooltip="{content: 'Resolution', placement:'bottom'}" class="bg-neutral-950 bg-opacity-75 rounded-lg p-1 text-gray-200 text-sm">
               {{ slip.mediable.height }}p
             </p>
           </div>
           <div>
             <div class="bg-neutral-950 bg-opacity-75 rounded-lg p-1 text-gray-200">
-              <TypeIcon />
+              <TypeIcon v-tooltip="{content: 'Type', placement:'bottom'}" />
             </div>
           </div>
         </div>
@@ -103,13 +103,13 @@ const TypeIcon = computed(() => {
         </div>
         <div class="flex self-center h-5/6">
           <ul class="flex text-3xl">
-            <li class="bg-brand-primary-600 rounded-full w-10 h-10 flex items-center justify-center self-center cursor-pointer transition-all hover:bg-brand-primary-700 mr-2">
+            <li v-tooltip="'Edit'" class="rounded-full w-10 h-10 flex items-center justify-center self-center cursor-pointer transition-all hover:bg-brand-primary-500 mr-2">
               <Settings color="white" width="25" height="25" />
             </li>
-            <li class="px-1 bg-brand-primary-600 rounded-full w-10 h-10 flex items-center justify-center self-center cursor-pointer transition-all hover:bg-brand-primary-700 mr-2">
+            <li v-tooltip="'Download'" class="px-1 rounded-full w-10 h-10 flex items-center justify-center self-center cursor-pointer transition-all hover:bg-brand-primary-500 mr-2">
               <Download color="white" width="25" height="25" />
             </li>
-            <li class="px-1 bg-brand-primary-600 rounded-full w-10 h-10 flex items-center justify-center self-center cursor-pointer transition-all hover:bg-brand-primary-700">
+            <li v-tooltip="'Delete'" class="px-1 rounded-full w-10 h-10 flex items-center justify-center self-center cursor-pointer transition-all hover:bg-brand-primary-500">
               <Trash color="white" width="25" height="25" @click="showDeleteModal = true" />
             </li>
           </ul>

resources/js/app.js

@@ -1,13 +1,14 @@
 import './bootstrap'
 import '../css/app.css'
 
-import { createApp, h } from 'vue'
-import { createInertiaApp } from '@inertiajs/vue3'
-import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'
-import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m'
-import { SnackbarService } from 'vue3-snackbar'
+import {createApp, h} from 'vue'
+import {createInertiaApp} from '@inertiajs/vue3'
+import {resolvePageComponent} from 'laravel-vite-plugin/inertia-helpers'
+import {ZiggyVue} from '../../vendor/tightenco/ziggy/dist/vue.m'
+import {SnackbarService} from 'vue3-snackbar'
 import 'vue3-snackbar/styles'
-
+import FloatingVue from 'floating-vue'
+import 'floating-vue/dist/style.css'
 
 const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel'
 
@@ -19,6 +20,16 @@ createInertiaApp({
       .use(plugin)
       .use(ZiggyVue, Ziggy)
       .use(SnackbarService)
+      .use(FloatingVue,{
+        themes: {
+          tooltip: {
+            delay: {
+              show:100,
+              delay:100,
+            },
+          },
+        },
+      })
       .mount(el)
   },
   progress: {