New tooltip element

composer.json

@@ -71,10 +71,12 @@
         "drupal/smart_trim": "^2.1",
         "drupal/stage_file_proxy": "^2.1",
         "drupal/tfa": "^1.0",
+        "drupal/tooltip": "^1.1",
         "drupal/upgrade_status": "^4.0",
         "drupal/username_enumeration_prevention": "^1.3",
         "drush/drush": "^11",
         "longwave/laminas-diactoros": "^2.14",
+        "mglaman/composer-drupal-lenient": "^1",
         "npm-asset/anchor-js": "^5.0",
         "npm-asset/select2": "^4.0",
         "npm-asset/slick-carousel": "^1.8",
@@ -121,7 +123,8 @@
             "dealerdirect/phpcodesniffer-composer-installer": true,
             "drupal/core-composer-scaffold": true,
             "drupal/core-project-message": true,
-            "oomphinc/composer-installers-extender": true
+            "oomphinc/composer-installers-extender": true,
+            "mglaman/composer-drupal-lenient": true
         },
         "platform": {
             "php": "8.1"
@@ -156,6 +159,9 @@
             },
             "npm-asset/anchor-js": {
                 "remove font-face": "patches/remove-anchorjs-fontface.patch"
+            },
+            "drupal/tooltip": {
+                "Remove hard dependency on CKEditor": "patches/tooltip.patch"
             }
         },
         "drupal-scaffold": {
@@ -202,9 +208,13 @@
                 "  * Remove the plugin that prints this message:",
                 "      composer remove drupal/core-project-message"
             ]
+        },
+        "drupal-lenient": {
+            "allowed-list": ["drupal/tooltip"]
         }
     },
     "replace": {
-        "drupal/ctools": "*"
+        "drupal/ctools": "*",
+        "drupal/ckeditor": "*"
     }
 }

config/sync/core.extension.yml

@@ -82,6 +82,7 @@ module:
   tfa: 0
   token: 0
   toolbar: 0
+  tooltip: 0
   update: 0
   user: 0
   username_enumeration_prevention: 0

patches/tooltip.patch

@@ -0,0 +1,23 @@
+diff --git a/tooltip.info.yml b/tooltip.info.yml
+index 60a5f91..b848e21 100644
+--- a/tooltip.info.yml
++++ b/tooltip.info.yml
+@@ -3,9 +3,6 @@ type: module
+ description: Provides advanced HTML tooltip with PopperJS library.
+ core: 8.x
+ core_version_requirement: ^8 || ^9 || ^10
+-dependencies:
+-  - drupal:editor
+-  - drupal:ckeditor
+
+ # Information added by Drupal.org packaging script on 2023-08-07
+ version: '1.1.1'
+diff --git a/tooltip.routing.yml b/tooltip.routing.yml
+index 07aab50..234cb19 100644
+--- a/tooltip.routing.yml
++++ b/tooltip.routing.yml
+@@ -17,3 +17,4 @@ tooltip.editor_dialog:
+         type: entity:editor
+   requirements:
+     _entity_access: 'editor.use'
++    _module_dependencies: 'editor + ckeditor'

web/modules/custom/server_general/src/ListTrait.php

@@ -0,0 +1,46 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Drupal\server_general;
+
+/**
+ * Helpers to create a list.
+ */
+trait ListTrait {
+
+  /**
+   * Build an unordered list.
+   *
+   * @param array $items
+   *   The items of the list.
+   *
+   * @return array
+   *   The render array of the list.
+   */
+  protected function buildElementUnorderedList(array $items): array {
+    return [
+      '#theme' => 'item_list',
+      '#list_type' => 'ul',
+      '#items' => $items,
+    ];
+  }
+
+  /**
+   * Build an ordered list.
+   *
+   * @param array $items
+   *   The items of the list.
+   *
+   * @return array
+   *   The render array of the list.
+   */
+  protected function buildElementOrderedList(array $items): array {
+    return [
+      '#theme' => 'item_list',
+      '#list_type' => 'ol',
+      '#items' => $items,
+    ];
+  }
+
+}

web/modules/custom/server_general/src/TooltipTrait.php

@@ -0,0 +1,73 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Drupal\server_general;
+
+use Drupal\Component\Serialization\Json;
+
+/**
+ * Helpers to build a tooltip.
+ */
+trait TooltipTrait {
+
+  use ElementTrait;
+
+  /**
+   * Build a span with a tooltip. This trait depends on the tooltip module.
+   *
+   * @param string $text
+   *   The text to generate the link with the tooltip.
+   * @param array $content
+   *   Items to render inside the tooltip.
+   * @param array $settings
+   *   Additional settings to pass to render the tooltip.
+   *
+   * @return array
+   *   The render array.
+   */
+  protected function buildElementSpanWithTooltip(string|\Stringable $text, array $content, array $settings = []): array {
+    $default_settings = [];
+    $default_settings['placement'] = 'bottom';
+    $default_settings['content'] = $this->renderer->render($content);
+    $settings = array_merge($default_settings, $settings);
+
+    // Create the tooltip element now.
+    return [
+      '#theme' => 'server_theme_element__tooltip_span',
+      '#text' => $text,
+      '#settings' => json::encode($settings),
+    ];
+  }
+
+  /**
+   * Build a link with a tooltip. This trait depends on the tooltip module.
+   *
+   * @param string $text
+   *   The text to generate the link with the tooltip.
+   * @param string $href
+   *   The href of the link.
+   * @param array $content
+   *   Items to render inside the tooltip.
+   * @param array $settings
+   *   Additional settings to pass to render the tooltip.
+   *
+   * @return array
+   *   The render array.
+   */
+  protected function buildElementLinkWithTooltip(string|\Stringable $text, string $href, array $content, array $settings = []): array {
+    $default_settings = [];
+    $default_settings['placement'] = 'bottom';
+    $default_settings['content'] = $this->renderer->render($content);
+    $settings = array_merge($default_settings, $settings);
+
+    // Create the tooltip element now.
+    return [
+      '#theme' => 'server_theme_element__tooltip_link',
+      '#href' => $href,
+      '#text' => $text,
+      '#settings' => Json::encode($settings),
+    ];
+  }
+
+}

web/modules/custom/server_style_guide/src/Controller/StyleGuideController.php

@@ -17,9 +17,11 @@
 use Drupal\server_general\ElementWrapTrait;
 use Drupal\server_general\InnerElementTrait;
 use Drupal\server_general\LinkTrait;
+use Drupal\server_general\ListTrait;
 use Drupal\server_general\SocialShareTrait;
 use Drupal\server_general\TagTrait;
 use Drupal\server_general\TitleAndLabelsTrait;
+use Drupal\server_general\TooltipTrait;
 use Drupal\server_style_guide\StyleGuideElementWrapTrait;
 use Symfony\Component\DependencyInjection\ContainerInterface;
 
@@ -37,10 +39,12 @@ class StyleGuideController extends ControllerBase {
   use ElementWrapTrait;
   use InnerElementTrait;
   use LinkTrait;
+  use ListTrait;
   use SocialShareTrait;
   use StyleGuideElementWrapTrait;
   use TagTrait;
   use TitleAndLabelsTrait;
+  use TooltipTrait;
 
 
   /**
@@ -180,6 +184,9 @@ protected function getAllElements() : array {
     $element = $this->getNodeNews();
     $build[] = $this->wrapElementNoContainer($element, 'Node view: News');
 
+    $element = $this->getTooltip();
+    $build[] = $this->wrapElementWideContainer($element, 'Element: Tooltip');
+
     return $build;
   }
 
@@ -848,4 +855,20 @@ protected function getRelatedContent(int $num = 5, bool $is_featured = FALSE): a
     return $elements;
   }
 
+  /**
+   * Renders a tooltip.
+   *
+   * @return array
+   *   A render array.
+   */
+  protected function getTooltip() : array {
+    $content = $this->getMediaImageWithCreditOverlay();
+    $elements[] = $this->buildElementSpanWithTooltip('This element has a tooltip', $content, ['placement' => 'top']);
+
+    $content = ['#markup' => 'An example site'];
+    $elements[] = $this->buildElementLinkWithTooltip('This element is a link with tooltip', 'https://example.com', $content, ['placement' => 'top']);
+
+    return $this->buildElementUnorderedList($elements);
+  }
+
 }