Convert Tooltip from Coffeescript to Javascript

Move the tooltip also to the app/javascript folder and import the file only in the GUI init - function. It isn't used anywhere else. Also remove jQuery usage in that tooltips.js.

app/assets/javascripts/alchemy/admin.js

@@ -30,6 +30,5 @@
 //= require alchemy/alchemy.uploader
 //= require alchemy/alchemy.preview_window
 //= require alchemy/alchemy.spinner
-//= require alchemy/alchemy.tooltips
 //= require alchemy/page_select
 //= require alchemy/node_select

app/javascript/alchemy_admin/gui.js

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

app/javascript/alchemy_admin/tooltips.js

@@ -0,0 +1,34 @@
+/**
+ * small helper to create html elements
+ * @param {String} tag
+ * @param {String} className
+ * @param {String|undefined} content
+ * @returns {HTMLElement}
+ */
+function createHtmlElement(tag, className, content = undefined) {
+  const element = document.createElement(tag)
+  element.classList.add(className)
+  if (content) {
+    element.appendChild(document.createTextNode(content))
+  }
+  return element
+}
+
+/**
+ * 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 with an div.with-hint - tag
+    const wrapper = createHtmlElement("div", "with-hint")
+    element.parentElement.insertBefore(wrapper, element)
+    wrapper.appendChild(element)
+
+    // add hint bubble
+    wrapper.appendChild(createHtmlElement("span", "hint-bubble", text))
+  })
+}