Add error handling via tooltip

app/View/Form/Select.php

@@ -47,6 +47,7 @@ class Select extends Component
                         <option value="{{$option['id']}}">{{ $option['name'] }}</option>
                         @endforeach
                     </select>
+                    <x-ui::errors :for="$name" />
                     @if($hint)
                     <x-form::hint class="right-6">{{$hint}}</x-form::hint>
                     @endif

app/View/Form/Text.php

@@ -44,6 +44,7 @@ class Text extends Component
                         "
                         {{ $attributes }}
                     />
+                    <x-ui::errors :for="$name" />
                     @if($hint)
                     <x-form::hint>{{$hint}}</x-form::hint>
                     @endif

app/View/Ui/Errors.php

@@ -0,0 +1,33 @@
+<?php
+
+namespace App\View\Ui;
+
+use Illuminate\View\Component;
+
+class Errors extends Component
+{
+
+    public function __construct(
+        public string $for,
+    ) {
+    }
+
+    public function id(): string
+    {
+        return 'errors-' . str_replace('.', '--', $this->for);
+    }
+
+    public function render()
+    {
+        return <<<'HTML'
+            @error($for)
+            <div x-data="{error: ''}" x-init="window.setTimeout(() => document.querySelector('#{{$id()}}') ? document.querySelector('#{{$id()}}').remove() : null, 2000)" class="absolute bottom-[calc(100%+0.5rem)] right-0" id="{{$id}}">
+                <div class="tippy-box" tabindex="-1" data-theme="danger" data-placement="top">
+                    <div class="tippy-content">{{$message}}</div>
+                    <div class="tippy-arrow absolute right-0 mr-2"></div>
+                </div>
+            </div>
+            @enderror
+        HTML;
+    }
+}