add tooltip component

resources/js/plugins/tooltip.js

@@ -0,0 +1,55 @@
+export default function (Alpine) {
+    Alpine.directive("tooltip", (el, directive) => {
+        if (!directive.value) handleRoot(el, Alpine);
+        else if (directive.value === "trigger") handleTrigger(el, Alpine);
+        else if (directive.value === "content") handleContent(el, Alpine);
+    }).before("bind");
+}
+
+function handleRoot(el, Alpine) {
+    Alpine.bind(el, {
+        "x-id"() {
+            return ["alpine-tooltip", "alpine-tooltip-trigger"];
+        },
+        ":id"() {
+            return this.$id("alpine-tooltip");
+        },
+        "x-data"() {
+            return {
+                __open: false,
+                __close() {
+                    this.__open = false;
+                },
+            };
+        },
+    });
+}
+
+function handleTrigger(el, Alpine) {
+    Alpine.bind(el, {
+        "x-ref": "__tooltip-trigger",
+        ":id"() {
+            return this.$id("alpine-tooltip-trigger");
+        },
+        "@focusin"() {
+            this.$data.__open = !this.$data.__open;
+        },
+        "@focusout"() {
+            this.$data.__close();
+        },
+        "@mouseenter"() {
+            this.$data.__open = !this.$data.__open;
+        },
+        "@mouseleave"() {
+            this.$data.__close();
+        },
+    });
+}
+
+function handleContent(el, Alpine) {
+    Alpine.bind(el, {
+        "x-show"() {
+            return this.$data.__open;
+        },
+    });
+}

resources/views/components/tooltip/content.blade.php

@@ -0,0 +1,17 @@
+@props([
+    'align' => 'center',
+    'side' => 'top',
+    'sideOffset' => 4,
+])
+@php
+    $alignment = $side . ['center' => '', 'end' => '-end', 'start' => '-start'][$align];
+@endphp
+
+<div
+    x-tooltip:content
+    x-transition:enter.delay.700ms
+    x-anchor.{{ $alignment }}.offset.{{ $sideOffset }}="document.getElementById($id('alpine-tooltip'))"
+    {{ $attributes->twMerge('z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground') }}
+>
+    {{ $slot }}
+</div>

resources/views/components/tooltip/index.blade.php

@@ -0,0 +1,6 @@
+<div
+    x-data
+    x-tooltip
+>
+    {{ $slot }}
+</div>

resources/views/components/tooltip/trigger.blade.php

@@ -0,0 +1,6 @@
+<div
+    x-tooltip:trigger
+    class="inline-flex"
+>
+    {{ $slot }}
+</div>

src/LaravelLuviServiceProvider.php

@@ -32,6 +32,7 @@ class LaravelLuviServiceProvider extends ServiceProvider
         'switch',
         'tabs',
         'textarea',
+        'tooltip',
         'typography',
     ];
 
@@ -91,6 +92,10 @@ public function boot(): void
             __DIR__.'/../resources/js/plugins/searchable.js' => resource_path('js/plugins/searchable.js'),
         ], 'searchable');
 
+        $this->publishes([
+            __DIR__.'/../resources/js/plugins/tooltip.js' => resource_path('js/plugins/tooltip.js'),
+        ], 'tooltip');
+
         // tailwind / css
         $this->publishes([
             __DIR__.'/../tailwind.config.js' => base_path('tailwind.config.js'),