Replace the jQuery Tooltip with vanilla Javascript

Add a dom_helper.js to collect a few repetitive functions.

app/javascript/alchemy_admin/dom_helpers.js

@@ -0,0 +1,20 @@
+/**
+ * create a HTML element
+ * @param {string} text
+ * @returns {HTMLElement}
+ */
+export function createHtmlElement(text) {
+  const element = document.createElement("div")
+  element.innerHTML = text
+  return element.firstElementChild
+}
+
+/**
+ * wrap element with wrappingElement
+ * @param {HTMLElement} element
+ * @param {HTMLElement} wrappingElement
+ */
+export function wrap(element, wrappingElement) {
+  element.replaceWith(wrappingElement)
+  wrappingElement.appendChild(element)
+}

app/javascript/alchemy_admin/gui.js

@@ -1,10 +1,25 @@
 import TagsAutocomplete from "alchemy_admin/tags_autocomplete"
 import Tooltips from "alchemy_admin/tooltips"
 
+/**
+ * translate the jQuery scope into a native Element
+ * @param scope
+ * @returns {Element|Document}
+ */
+function currentElement(scope) {
+  if (scope && scope.length > 0) {
+    return scope[0]
+  } else {
+    return document
+  }
+}
+
 function init(scope) {
+  const element = currentElement(scope)
+
   Alchemy.SelectBox(scope)
   Alchemy.Datepicker(scope && scope.selector)
-  Tooltips(scope)
+  Tooltips(element)
   Alchemy.Buttons.observe(scope)
   if (!scope) {
     Alchemy.watchForDialogs()

app/javascript/alchemy_admin/tooltips.js

@@ -1,8 +1,15 @@
-export default function Tooltips(scope) {
-  $("[data-alchemy-tooltip]", scope).each(function () {
-    const $el = $(this)
-    const text = $el.data("alchemy-tooltip")
-    $el.wrap('<span class="with-hint"/>')
-    $el.after('<span class="hint-bubble">' + text + "</span>")
+import { createHtmlElement, wrap } from "alchemy_admin/dom_helpers"
+
+/**
+ * show tooltips on fixed inputs
+ * @param {Element|Document} baseElement
+ * @constructor
+ */
+export default function Tooltips(baseElement) {
+  baseElement.querySelectorAll("[data-alchemy-tooltip]").forEach((element) => {
+    const text = element.dataset.alchemyTooltip
+
+    wrap(element, createHtmlElement('<div class="with-hint" />'))
+    element.after(createHtmlElement(`<span class="hint-bubble">${text}</span>`))
   })
 }