Commit 469a766b authored by Jürgen Haas's avatar Jürgen Haas
Browse files

fix: Harden tooltip rendering 

By: jurgenhaas
parent 3dc14caa

dist/js/tooltip.js

+7 −3
Changes for dist/js/tooltip.js: 7 added lines, 3 removed lines.
Original line number Diff line number Diff line 
((Drupal, once, _ref) => {

  let {computePosition, offset, shift, flip} = _ref;

  Drupal.theme.ginTooltipWrapper = (dataset, title) => `<div class="gin-tooltip ${dataset.drupalTooltipClass || ""}">\n      ${dataset.drupalTooltip || title}\n    </div>`, 

  Drupal.behaviors.ginTooltip = {

  Drupal.theme.ginTooltipWrapper = (dataset, title) => {

    const el = document.createElement("div");

    return el.classList.add("gin-tooltip"), dataset.drupalTooltipClass && dataset.drupalTooltipClass.split(/\s+/).filter((token => "" !== token)).forEach((token => {

      el.classList.add(token);

    })), el.textContent = dataset.drupalTooltip || title || "", el;

  }, Drupal.behaviors.ginTooltip = {

    attach: context => {

      Drupal.ginTooltip.init(context);

    }
@@ -9,7 +13,7 @@ 
    init: function(context) {

      once("ginTooltipInit", "[data-gin-tooltip]", context).forEach((trigger => {

        const title = trigger.title;

        title && (trigger.title = ""), trigger.insertAdjacentHTML("afterend", Drupal.theme.ginTooltipWrapper(trigger.dataset, title));

        title && (trigger.title = ""), trigger.insertAdjacentElement("afterend", Drupal.theme.ginTooltipWrapper(trigger.dataset, title));

        const tooltip = trigger.nextElementSibling, updatePosition = () => {

          this.computePosition(trigger, tooltip);

        };

js/tooltip.js

+15 −5
Changes for js/tooltip.js: 15 added lines, 5 removed lines.
Original line number Diff line number Diff line
@@ -14,10 +14,20 @@ 
   * @return {HTMLElement}

   *   A DOM Node.

   */

  Drupal.theme.ginTooltipWrapper = (dataset, title) =>

    `<div class="gin-tooltip ${dataset.drupalTooltipClass || ''}">

      ${dataset.drupalTooltip || title}

    </div>`;

  Drupal.theme.ginTooltipWrapper = (dataset, title) => {

    const el = document.createElement('div');

    el.classList.add('gin-tooltip');

    if (dataset.drupalTooltipClass) {

      dataset.drupalTooltipClass

        .split(/\s+/)

        .filter((token) => token !== '')

        .forEach((token) => {

          el.classList.add(token);

        });

    }

    el.textContent = dataset.drupalTooltip || title || '';

    return el;

  };



  /**

   * Attaches the tooltip behavior to all required triggers.
@@ -45,7 +55,7 @@ 
            trigger.title = '';

          }



          trigger.insertAdjacentHTML(

          trigger.insertAdjacentElement(

            'afterend',

            Drupal.theme.ginTooltipWrapper(trigger.dataset, title),

          );