tooltip final

resources/views/filament/tables/columns/multiline/fumetto.blade.php

@@ -1,13 +1,7 @@
-<div class="mx-3 my-auto" x-data="{ open: false }">
-    <div x-on:mouseover="open = true" x-on:mouseleave="open = false">
-        <x-filament::icon-button icon="heroicon-o-chat-bubble-left-ellipsis" color="alert gray" />
-    </div>
-    <div x-show="open" x-transition:enter="transition ease-out duration-200"
-        x-transition:enter-start="opacity-0 transform translate-y-2"
-        x-transition:enter-end="opacity-100 transform translate-y-0">
-        <div
-            class="absolute z-10 bg-gray-100 dark:bg-gray-800 p-5 border border-gray-300 dark:border-gray-900 rounded-md">
-            <div class="grid grid-cols-5 grid-rows-5 gap-2">
+@if ($hasodds())
+    <div x-data="{ message: 'loading..' }" class="mx-3 my-auto">
+        <template x-ref="template">
+            <div class="grid grid-cols-5 grid-rows-5 gap-2 m-5">
 
                 @foreach ($getFumetto() as $item)
                     @include('filament.tables.columns.multiline.bkm', [
@@ -36,6 +30,14 @@
                     ])
                 @endforeach
             </div>
-        </div>
+        </template>
+
+        <x-filament::icon-button icon="heroicon-o-chat-bubble-left-ellipsis" color="gray"
+            x-tooltip.html="{
+        content: () => $refs.template.innerHTML,
+        allowHTML: true,
+        theme: $store.theme,
+        appendTo: $root
+    }" />
     </div>
-</div>
+@endif