Fix the popover on the login form

src/plugins/controlbox/templates/loginform.js

@@ -28,12 +28,7 @@ function tplTrustCheckbox(checked) {
                 ?checked=${checked}
             />
             <label for="converse-login-trusted" class="form-check-label login-trusted__desc">${i18n_trusted}</label>
-            <button type="button" class="btn p-0"
-                data-toggle="popover"
-                title="${i18n_hint_trusted}"
-                data-content="${i18n_hint_trusted}">
-                <converse-icon class="fa fa-info-circle" size="1.2em"></converse-icon>
-            </button>
+            <converse-popover title="${__('Info')}" text="${i18n_hint_trusted}"></converse-popover>
         </div>
     `;
 };

src/plugins/modal/index.js

@@ -2,22 +2,23 @@
  * @copyright The Converse.js contributors
  * @license Mozilla Public License (MPLv2)
  */
-import BaseModal from './modal.js';
-import modal_api from './api.js';
-import { _converse, api, converse } from '@converse/headless';
+import BaseModal from "./modal.js";
+import Popover from "./popover.js";
+import modal_api from "./api.js";
+import { _converse, api, converse } from "@converse/headless";
 
-Object.assign(converse.env, { BaseModal });
+Object.assign(converse.env, { BaseModal, Popover });
 
-converse.plugins.add('converse-modal', {
-    initialize () {
-        api.listen.on('disconnect', () => {
-            const container = document.querySelector('#converse-modals');
+converse.plugins.add("converse-modal", {
+    initialize() {
+        api.listen.on("disconnect", () => {
+            const container = document.querySelector("#converse-modals");
             if (container) {
-                container.innerHTML = '';
+                container.innerHTML = "";
             }
         });
 
-        api.listen.on('clearSession', () => api.modal.removeAll());
+        api.listen.on("clearSession", () => api.modal.removeAll());
 
         Object.assign(_converse.api, modal_api);
     },

src/plugins/modal/popover.js

@@ -0,0 +1,50 @@
+import '@popperjs/core';
+import { html } from "lit";
+import { Popover as BootstrapPopover } from "bootstrap";
+import { api } from "@converse/headless";
+import { CustomElement } from "shared/components/element.js";
+
+import './styles/popover.scss';
+
+class Popover extends CustomElement {
+
+    static get properties() {
+        return {
+            title: { type: String },
+            text: { type: String },
+        };
+    }
+
+    constructor() {
+        super();
+        this.title = null;
+        this.text = null;
+    }
+
+    /**
+     * @param {import("lit").PropertyValues} changedProperties
+     */
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        new BootstrapPopover(this.firstElementChild, {
+            container: 'converse-root',
+            trigger: 'focus',
+        });
+    }
+
+    render() {
+        return html`<button
+            type="button"
+            class="btn p-0"
+            data-toggle="popover"
+            data-bs-title="${this.title}"
+            data-bs-content="${this.text}"
+        >
+            <converse-icon class="fa fa-info-circle" size="1.2em"></converse-icon>
+        </button>`;
+    }
+}
+
+api.elements.define("converse-popover", Popover);
+
+export default Popover;

src/plugins/modal/styles/popover.scss

@@ -0,0 +1,10 @@
+converse-root#conversejs {
+    .popover-header {
+        color: var(--background-color);
+        background-color: var(--secondary-color);
+    }
+    .popover-body {
+        color: var(--foreground-color);
+        background-color: var(--background-color);
+    }
+}

src/shared/styles/themes/dracula.scss

@@ -26,6 +26,8 @@
     --danger-color: var(--red);
     --warning-color: var(--orange);
     --info-color: var(--yellow);
+
+    --converse-body-bg: var(--background-color);
     --converse-highlight-color: var(--yellow) !important;
     .list-group-item {
         --converse-list-group-color: var(--foreground-color);