disable popover if the content is empty

Author: atmonshi

resources/views/popover-column.blade.php

@@ -66,15 +66,17 @@ class="h-4 w-4 text-gray-500 dark:text-gray-400"
         @endif
     </div>
 
-    <div class="z-50 fi-popover-content w-[{{ $getPopOverMaxWidth }}px] ring-1 ring-gray-950/5 dark:ring-white/10 rounded-lg shadow-lg bg-white dark:bg-gray-800 transition"
-         x-transition:enter-start="opacity-0"
-         x-transition:leave-end="opacity-0"
-         x-cloak
-         x-ref="panel"
-         x-float.placement.{{ $getPlacement }}.flip.teleport.offset="{ offset: {{ $getOffset }} }"
-    >
-        {{ $getContent }}
-    </div>
+    @if (filled($getContent))
+        <div class="z-50 fi-popover-content w-[{{ $getPopOverMaxWidth }}px] ring-1 ring-gray-950/5 dark:ring-white/10 rounded-lg shadow-lg bg-white dark:bg-gray-800 transition"
+             x-transition:enter-start="opacity-0"
+             x-transition:leave-end="opacity-0"
+             x-cloak
+             x-ref="panel"
+             x-float.placement.{{ $getPlacement }}.flip.teleport.offset="{ offset: {{ $getOffset }} }"
+        >
+            {{ $getContent }}
+        </div>
+    @endif
 
     @if (filled($descriptionBelow))
         <p

resources/views/popover-entry.blade.php

@@ -33,13 +33,16 @@ class="h-4 w-4 text-gray-500 dark:text-gray-400"
         @endif
     </div>
 
-    <div class="z-50 fi-popover-content w-[{{ $getPopOverMaxWidth }}px] ring-1 ring-gray-950/5 dark:ring-white/10 rounded-lg shadow-lg bg-white dark:bg-gray-800 transition"
-         x-transition:enter-start="opacity-0"
-         x-transition:leave-end="opacity-0"
-         x-cloak
-         x-ref="panel"
-         x-float.placement.{{ $getPlacement }}.flip.teleport.offset="{ offset: {{ $getOffset }} }"
-    >
-        {{ $getContent }}
-    </div>
+    @if (filled($getContent))
+        <div class="z-50 fi-popover-content w-[{{ $getPopOverMaxWidth }}px] ring-1 ring-gray-950/5 dark:ring-white/10 rounded-lg shadow-lg bg-white dark:bg-gray-800 transition"
+             x-transition:enter-start="opacity-0"
+             x-transition:leave-end="opacity-0"
+             x-cloak
+             x-ref="panel"
+             x-float.placement.{{ $getPlacement }}.flip.teleport.offset="{ offset: {{ $getOffset }} }"
+        >
+            {{ $getContent }}
+        </div>
+    @endif
+
 </div>

resources/views/popover-form.blade.php

@@ -45,14 +45,17 @@ class="h-4 w-4 text-gray-500 dark:text-gray-400"
             @endif
         </div>
 
-        <div class="z-50 fi-popover-content w-[{{ $getPopOverMaxWidth }}px] ring-1 ring-gray-950/5 dark:ring-white/10 rounded-lg shadow-lg bg-white dark:bg-gray-800"
-             x-transition:enter-start="opacity-0"
-             x-transition:leave-end="opacity-0"
-             x-cloak
-             x-ref="panel"
-             x-float.placement.{{ $getPlacement }}.flip.teleport.offset="{ offset: {{ $getOffset }} }"
-        >
-            {{ $getContent }}
-        </div>
+        @if (filled($getContent))
+            <div class="z-50 fi-popover-content w-[{{ $getPopOverMaxWidth }}px] ring-1 ring-gray-950/5 dark:ring-white/10 rounded-lg shadow-lg bg-white dark:bg-gray-800"
+                 x-transition:enter-start="opacity-0"
+                 x-transition:leave-end="opacity-0"
+                 x-cloak
+                 x-ref="panel"
+                 x-float.placement.{{ $getPlacement }}.flip.teleport.offset="{ offset: {{ $getOffset }} }"
+            >
+                {{ $getContent }}
+            </div>
+        @endif
+
     </div>
 </x-dynamic-component>