Introduction of tooltips.

resources/views/components/info-icon.blade.php

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" {{ $attributes->merge(['class' => 'size-8 p-1']) }}>
+    <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
+</svg>

resources/views/components/tooltip.blade.php

@@ -0,0 +1,11 @@
+<div
+    x-data="{ tooltip: false }"
+    x-on:mouseover="tooltip = true"
+    x-on:mouseleave="tooltip = false"
+    {{ $attributes->merge(['class' => 'size-8 cursor-pointer']) }}>
+    <x-info-icon/>
+    <div x-show="tooltip"
+         class="text-sm text-white absolute bg-gray-900 rounded-lg p-2 transform -translate-y-8 translate-x-8">
+        {{$slot}}
+    </div>
+</div>