Add Tooltop to new invoice button

resources/js/pages/Invoices.vue

@@ -17,6 +17,8 @@ import { Input } from '@/components/ui/input'
 import { toast } from 'vue-sonner'
 import { testToast } from '@/lib/utils'
 import SelectSeparator from '@/components/ui/select/SelectSeparator.vue'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+import { Kbd, KbdGroup } from '@/components/ui/kbd'
 
 const breadcrumbs: BreadcrumbItem[] = [{
     title: 'Rechnungsstellung',
@@ -192,7 +194,7 @@ const deleteInvoice = async (id: number) => {
             class="flex h-full flex-1 flex-col gap-4 overflow-x-auto p-4 lg:p-8 print:bg-transparent print:p-0 print:m-0">
 
             <!-- Function Header -->
-            <div id="function-header" class="flex row justify-between items-center gap-8 mb-4">
+            <div id="function-header" class="flex row justify-between items-center mb-4 gap-4">
 
                 <!-- Year select -->
                 <div class="flex row items-center">
@@ -235,15 +237,30 @@ const deleteInvoice = async (id: number) => {
                     </span>
                 </div>
 
-                <!-- New button -->
                 <!-- <Button size="sm" @click="testToast" class="mr-2">
                     Toast
                 </Button> -->
 
+                <!-- New button -->
+                <TooltipProvider>
+                    <Tooltip>
+                        <TooltipTrigger>
                             <Button size="sm" variant="action" @click="showDetail(newInvoice())">
                                 <Plus />
                                 Neu
                             </Button>
+                        </TooltipTrigger>
+                        <TooltipContent>
+                            <span>Neue Rechnung anlegen</span>
+                            <KbdGroup class="ml-2">
+                                <Kbd class="visible-mac">⌘</Kbd>
+                                <Kbd class="visible-pc">Ctrl</Kbd>
+                                <Kbd>N</Kbd>
+                            </KbdGroup>
+                        </TooltipContent>
+                    </Tooltip>
+                </TooltipProvider>
+
             </div>
 
             <!-- Invoice Table -->