Create tooltip for model

Author: netervati

components/modal/createModel.vue

@@ -65,7 +65,7 @@
 <template>
   <ModalBase :id="id" @close="handleClose">
     <form @submit="onSubmit">
-      <h3 class="text-lg font-bold">Create a new Model</h3>
+      <ModalTitleModel>Create a new Model</ModalTitleModel>
       <ModalBaseModel
         :is-disabled="form.isSubmitting.value"
         :fields="fields"

components/modal/editModel.vue

@@ -76,7 +76,7 @@
 <template>
   <ModalBase :id="id" @close="handleClose">
     <form @submit="onSubmit">
-      <h3 class="text-lg font-bold">Edit the Model</h3>
+      <ModalTitleModel>Edit the Model</ModalTitleModel>
       <ModalBaseModel
         :is-disabled="form.isSubmitting.value"
         :fields="fields"

components/modal/titleModel.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+  import { InformationCircleIcon } from '@heroicons/vue/24/solid';
+</script>
+
+<template>
+  <h3 class="text-lg font-bold">
+    <slot></slot>
+    <div
+      class="tooltip tooltip-bottom"
+      data-tip="The model's name is case-sensitive. If you input &quot;Users&quot;, then the URL path for that model will be &quot;\Users&quot;."
+    >
+      <InformationCircleIcon class="ml-2 w-4 h-4" />
+    </div>
+  </h3>
+</template>