Migrate tooltip to a web component

The tooltip component can only be used on input fields. This way the update of the form builder is way easier. The previous function to transform the jQuery scope to a HTMLElement was removed and the dom helpers - modules is now in the utils folder.

app/javascript/alchemy_admin.js

@@ -17,6 +17,7 @@ import PagePublicationFields from "alchemy_admin/page_publication_fields"
 
 // Web Components
 import "alchemy_admin/components/char_counter"
+import "alchemy_admin/components/tooltip"
 import "alchemy_admin/components/datepicker"
 
 // Global Alchemy object

app/javascript/alchemy_admin/components/tooltip.js

@@ -0,0 +1,16 @@
+import { createHtmlElement, wrap } from "alchemy_admin/utils/dom_helpers"
+
+/**
+ * show tooltips on fixed inputs
+ */
+class Tooltip extends HTMLInputElement {
+  constructor() {
+    super()
+
+    const text = this.dataset.tooltip
+    wrap(this, createHtmlElement('<div class="with-hint" />'))
+    this.after(createHtmlElement(`<span class="hint-bubble">${text}</span>`))
+  }
+}
+
+customElements.define("alchemy-tooltip", Tooltip, { extends: "input" })

app/javascript/alchemy_admin/gui.js

@@ -1,24 +1,7 @@
 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.Tooltips(element)
   Alchemy.Buttons.observe(scope)
   if (!scope) {
     Alchemy.watchForDialogs()

app/javascript/alchemy_admin/dom_helpers.js → app/javascript/alchemy_admin/utils/dom_helpers.js

@@ -4,9 +4,9 @@
  * @returns {HTMLElement}
  */
 export function createHtmlElement(text) {
-  const element = document.createElement("div")
+  const element = document.createElement("template")
   element.innerHTML = text
-  return element.firstElementChild
+  return element.content.children[0]
 }
 
 /**

lib/alchemy/forms/builder.rb

@@ -11,7 +11,8 @@ def input(attribute_name, options = {}, &block)
         if object.respond_to?(:attribute_fixed?) && object.attribute_fixed?(attribute_name)
           options[:disabled] = true
           options[:input_html] = options.fetch(:input_html, {}).merge(
-            "data-alchemy-tooltip" => Alchemy.t(:attribute_fixed, attribute: attribute_name)
+            is: "alchemy-tooltip",
+            "data-tooltip": Alchemy.t(:attribute_fixed, attribute: attribute_name)
           )
         end