feat: add title tooltip to modal

aminnausin · aminnausin · commit 88cbca79ef58 · 2026-01-14T02:34:00.000-05:00
diff --git a/resources/js/components/cedar-ui/modal/BaseModal.vue b/resources/js/components/cedar-ui/modal/BaseModal.vue
@@ -1,17 +1,22 @@
 <script setup lang="ts">
 import { useModalStore } from '@/stores/ModalStore';
 import { ButtonCorner } from '@/components/cedar-ui/button';
+import { HoverCard } from '@/components/cedar-ui/hover-card';
 
 const modalStore = useModalStore();
 </script>
 
 <template>
     <section v-if="!modalStore.props?.hideHeader" class="flex flex-wrap items-center gap-2">
-        <h3 ref="modalTitle" id="modalTitle" class="flex-1 scroll-mt-16 text-xl font-semibold sm:scroll-mt-12">
-            <slot name="title">
-                {{ modalStore.props?.title ?? 'Modal Title' }}
-            </slot>
-        </h3>
+        <HoverCard class="flex-1 scroll-mt-16 sm:scroll-mt-12" :content="modalStore.props.titleTooltip">
+            <template #trigger>
+                <h3 ref="modalTitle" id="modalTitle" class="text-xl font-semibold">
+                    <slot name="title">
+                        {{ modalStore.props?.title ?? 'Modal Title' }}
+                    </slot>
+                </h3>
+            </template>
+        </HoverCard>
         <ButtonCorner @click="modalStore.close" class="static! m-0!" />
         <p class="text-foreground-2 w-full text-sm" v-if="$slots.description" id="modalDescription">
             <slot name="description"> </slot>
