Tooltips for markdown fields

doc/formelements.md

@@ -22,7 +22,7 @@ Fieldsets group other form elements (including nested fieldsets).
 
 Options:
 * `children` _(required)_ - containing child form elements
-* `background` _(optional)_ the background color may be one of [https://bulma.io/documentation/helpers/color-helpers/#background-color](Bulma's colors) or a valid CSS definition.
+* `background` _(optional)_ the background color may be one of [https://bulma.io/documentation/helpers/color-helpers/#background-color](Bulma's colors) (without the prefix `has-background-`) or a valid CSS definition.
 * `tablestyle` _(optional)_ set table view true or false. This will order the contained fieldsets as if they were table columns. The columns will have alternating colors ("zebra"). The head column will be populated by the labels of the children of the first fieldset. Labels in other columns will be hidden to avoid duplication. If cells in the first row must be skipped then [Spacers](#Spacer) can be used.
 * `scrollable` _(optional)_ can be used with `tablestyle`: The fieldset will not responsively adapt to screen width, but will extend horizontally and can be scrolled. The option may have unpredictable effects in complex forms!
 * `toggle` _(optional)_ - the fieldset is disabled and hidden until the toggle condition is met

public/css/app.css

@@ -219,3 +219,14 @@ fieldset .subtitle {
     border: 3px solid #fff;
     background-color: rgba(0, 0, 0, .3);
 }
+
+div .field.with-tooltip .control {
+    display: inline-flex;
+    justify-content: space-between;
+    align-items: normal;
+    align-content: baseline;
+
+    & button {
+        margin-left: 0.5rem;
+    }
+}

public/js/app.js

@@ -261,3 +261,14 @@ function cloneHandler(e) {
 }
 
 form.addEventListener('click', cloneHandler);
+
+/**
+ * Move tooltips inside headings for better styling
+ */
+Array.from(document.querySelectorAll('.with-tooltip .control button.tooltip-button')).forEach(function(elem) {
+    const prev = elem.previousElementSibling;
+    const headlines = ['H1', 'H2', 'H3', 'H4', 'H5', 'H6'];
+    if (headlines.includes(prev.tagName)) {
+        prev.appendChild(elem);
+    }
+});

src/FormGenerator/FormElements/AbstractDynamicFormElement.php

@@ -176,18 +176,4 @@ public function getViewVariables()
             ]
         );
     }
-
-    /**
-     * Parses tooltip.
-     * Transform newlines (\n) to NCR representation.
-     * If no tooltip given return empty string.
-     *
-     * @return string
-     */
-    protected function parseTooltip()
-    {
-        $tooltip = $this->getConfigValue('tooltip') ?? '';
-
-        return str_replace("\n", '

', $tooltip);
-    }
 }

src/FormGenerator/FormElements/AbstractFormElement.php

@@ -131,6 +131,20 @@ public function hasParent()
         return $this->parent !== null;
     }
 
+    /**
+     * Parses tooltip.
+     * Transform newlines (\n) to NCR representation.
+     * If no tooltip given return empty string.
+     *
+     * @return string
+     */
+    protected function parseTooltip()
+    {
+        $tooltip = $this->getConfigValue('tooltip') ?? '';
+
+        return str_replace("\n", '

', $tooltip);
+    }
+
     /**
      * Prepare variables array for twig view
      *

src/FormGenerator/FormElements/MarkDownFormElement.php

@@ -32,7 +32,8 @@ public function getViewVariables()
             $this->getConfig(),
             [
                 'id' => $this->getFormElementId(),
-                'markdown' => $markdown
+                'markdown' => $markdown,
+                'tooltip' => $this->parseTooltip(),
             ]
         );
     }

view/markdown.twig

@@ -1,7 +1,9 @@
+{% from '_macros' import renderTooltip %}
 <div class="column {{ column is not empty ? column : 'is-full' }}">
-    <div class="field">
+    <div class="field with-tooltip">
         <div class="control">
             {{ markdown | raw }}
+            {{ renderTooltip(tooltip) }}
         </div>
     </div>
 </div>