Implement hoverpic using stimulus.

assets/controllers/elements/hoverpic_controller.js

@@ -0,0 +1,20 @@
+import {Controller} from "@hotwired/stimulus";
+import {Popover} from "bootstrap";
+
+export default class extends Controller {
+    connect() {
+        const thumbnail_url = this.element.dataset.thumbnail;
+
+        this._popover = Popover.getOrCreateInstance(this.element, {
+            html: true,
+            trigger: 'hover',
+            placement: 'right',
+            container: 'body',
+            content: function () {
+                return '<img class="img-fluid" src="' + thumbnail_url + '" />';
+            }
+        });
+
+        this._popover.hide();
+    }
+}

assets/js/register_events.js

@@ -7,6 +7,7 @@ import "bootstrap-fileinput/css/fileinput.css"
 
 import "bootstrap-fileinput";
 
+import {Popover} from "bootstrap";
 
 
 class RegisterEventHelper {
@@ -16,8 +17,6 @@ class RegisterEventHelper {
         this.registerFileInput();
 
         this.registerSpecialCharInput();
-
-        this.registerHoverPics();
     }
 
     registerLoadHandler(fn) {
@@ -34,10 +33,6 @@ class RegisterEventHelper {
         });
     }
 
-    registerHoverPics() {
-
-    }
-
     registerFileInput() {
         this.registerLoadHandler(() => {
             $(".file").fileinput();