Issue #3438895 by finnsky, larowlan, plopesc, m4olivei, ckrina, mherchel, catch, alexpott, nod_, deviantintegral, jwitkowski79, nod_, jponch, jwitkowski79, rkoller, Ana Barcelona, YurkinPark, finnsky, javi-er, alvarito75, ctrlADel, AaronMcHale, Emma Horrell, akshayadhav, claireristow, baluv3, bronzehedwick, NikMis, deviantintegral, hot_sauce, kostyashupenko, gnuschichten, keyboardcowboy, gdd, silviu, Prashant.c, ehsann_95, pjudge, rkoller, Shreya_th, starshaped, bal krishna, meeni_dhobale, mherchel, johnpicozzi, chetan_, saschaeggi, markie, iro, abhishek_gupta, vensires, KurtTrowbridge, hooroomoo, Utkarsh_33, Svitlana, starshaped, KeyboardCowboy, benjifisher, ahsannazir, tim.plunkett, tedbow, flanneryla, Anandt846, Kanchan Bhogade, SKAUGHT, joaopauloc.dev, Silviu S., q0rban, rabbitlair, bnjmnm, Mithun S, Akhil Babu, gaurav_manerkar, dead_arm, YurkinPark, lauriii, sani, chetan 11, DieterHolvoet, Gábor Hojtsy, jwilson3, marcelreimer: Add the new Navigation to core as an Experimental module

1 files changed, 83 insertions, 0 deletions

diff --git a/core/modules/navigation/js/tooltip.js b/core/modules/navigation/js/tooltip.js
new file mode 100644
index 000000000000..a92e045b1f81
--- /dev/null
+++ b/core/modules/navigation/js/tooltip.js
@@ -0,0 +1,83 @@
+/* cspell:ignore uidom */
+/**
+ * @file
+ *
+ * Simple tooltip component.
+ *
+ * To use it just add:
+ *
+ * data-drupal-tooltip="title" - Text displayed in tooltip.
+ *
+ * data-drupal-tooltip-class="extra-class" - Optional class for css.
+ *
+ * data-drupal-tooltip-position="top" - Tooltip position (default right).
+ *
+ * @see https://floating-ui.com/ for available placement options.
+ */
+
+((Drupal, once, { computePosition, offset, shift, flip }) => {
+  /**
+   * Theme function for a tooltip.
+   *
+   * @param {object} dataset
+   *   The dataset object.
+   * @param {string} dataset.drupalTooltipClass
+   *   Extra class for theming.
+   * @param {string} dataset.drupalTooltip
+   *   The text for tooltip.
+   *
+   * @return {HTMLElement}
+   *   A DOM Node.
+   */
+  Drupal.theme.tooltipWrapper = (dataset) =>
+    `<div class="toolbar-tooltip ${dataset.drupalTooltipClass || ''}">
+      ${dataset.drupalTooltip}
+    </div>`;
+
+  /**
+   * Attaches the tooltip behavior to all required triggers.
+   *
+   * @type {Drupal~behavior}
+   *
+   * @prop {Drupal~behaviorAttach} attach
+   *   Attaches the tooltip behavior.
+   */
+  Drupal.behaviors.tooltipInit = {
+    attach: (context) => {
+      once('tooltip-trigger', '[data-drupal-tooltip]', context).forEach(
+        (trigger) => {
+          trigger.insertAdjacentHTML(
+            'afterend',
+            Drupal.theme.tooltipWrapper(trigger.dataset),
+          );
+          const tooltip = trigger.nextElementSibling;
+
+          const updatePosition = () => {
+            computePosition(trigger, tooltip, {
+              strategy: 'fixed',
+              placement: trigger.dataset.drupalTooltipPosition || 'right',
+              middleware: [
+                flip({ padding: 16 }),
+                offset(6),
+                shift({ padding: 16 }),
+              ],
+            }).then(({ x, y }) => {
+              Object.assign(tooltip.style, {
+                left: `${x}px`,
+                top: `${y}px`,
+              });
+            });
+          };
+
+          // Small trick to avoid tooltip stays on same place when button size changed.
+          const ro = new ResizeObserver(updatePosition);
+
+          ro.observe(trigger);
+
+          trigger.addEventListener('mouseover', updatePosition);
+          trigger.addEventListener('focus', updatePosition);
+        },
+      );
+    },
+  };
+})(Drupal, once, FloatingUIDOM);