fix(portal): Do not break Flowbite popovers on DOM patching (#6787)

Closes [#6682](https://github.com/firezone/firezone/issues/6682)

elixir/apps/web/assets/js/hooks.js

@@ -1,9 +1,7 @@
-import { initTabs } from "flowbite";
+import { initTabs, Popover } from "flowbite";
 
 let Hooks = {};
 
-// Copy to clipboard
-
 Hooks.Tabs = {
   mounted() {
     initTabs();
@@ -148,4 +146,19 @@ Hooks.ConfirmDialog = {
   },
 };
 
+Hooks.Popover = {
+  mounted() {
+    const $triggerEl = this.el;
+    const $targetEl = document.getElementById($triggerEl.getAttribute('data-popover-target-id'));
+
+    const options = {
+      placement: 'top',
+      triggerType: 'hover',
+      offset: 5,
+    };
+
+    new Popover($targetEl, $triggerEl, options);
+  }
+}
+
 export default Hooks;

elixir/apps/web/lib/web/components/core_components.ex

@@ -815,7 +815,7 @@ defmodule Web.CoreComponents do
     assigns = assign(assigns, :target_id, target_id)
 
     ~H"""
-    <span data-popover-target={@target_id}>
+    <span phx-hook="Popover" id={@target_id <> "-trigger"} data-popover-target-id={@target_id}>
       <%= render_slot(@target) %>
     </span>