FRONT-2492: Tooltip pattern.

templates/patterns/tooltip/pattern-tooltip.html.twig

@@ -0,0 +1,39 @@
+{#
+/**
+ * @file
+ * Tooltip pattern.
+ */
+#}
+
+{% set id = 'tooltip-' ~ random(1000) %}
+
+{% set attributes =  create_attribute({
+  'title': title,
+  'data-bs-original-title': title,
+  'data-bs-toggle': 'tooltip',
+  'autocomplete': 'off',
+}) %}
+
+{% if placement is defined %}
+  {% set attributes = attributes.setAttribute('data-bs-placement', placement) %}
+{% endif %}
+
+{% if link %}
+  {{ pattern('link', {
+    label: label,
+    path: url|default('#' ~ id),
+    variant: style,
+    attributes: attributes
+      .setAttribute('role', 'button')
+  }) }}
+{% else %}
+  {{ pattern('button', {
+    label: label,
+    variant: style,
+    outline: outline,
+    size: size,
+    type: 'button',
+    attributes: attributes
+  }) }}
+{% endif %}
+

templates/patterns/tooltip/tooltip.js

@@ -0,0 +1,9 @@
+Drupal.behaviors.tooltip = {
+  attach: function () {
+    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
+    tooltipTriggerList.map(function (tooltipTriggerEl) {
+      return new bootstrap.Tooltip(tooltipTriggerEl)
+    })
+  }
+
+};

templates/patterns/tooltip/tooltip.ui_patterns.yml

@@ -0,0 +1,59 @@
+tooltip:
+  label: "Tooltip"
+  description: "The tooltip JavaScript plugin is used to show and hide content when hovering. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. https://v5.getbootstrap.com/docs/5.0/components/tooltips/"
+  settings:
+    style:
+      type: select
+      label: Button or link style
+      options:
+        primary: primary
+        secondary: secondary
+        success: success
+        danger: danger
+        warning: warning
+        info: info
+        light: light
+        dark: dark
+        link  : link
+      preview: primary
+    link:
+      type: boolean
+      label: Toggle as a link
+    outline:
+      type: boolean
+      label: Button outline
+    size:
+      type: select
+      label: Button size
+      options:
+        sm: small
+        lg: large
+    placement:
+      type: select
+      label: Tooltip placement
+      options:
+        top: top
+        right: right
+        bottom: bottom
+        left: left
+      preview: top
+  fields:
+    label:
+      type: "text"
+      label: "label"
+      description: "Button or link label"
+      preview: "Toggle element"
+    url:
+      type: "text"
+      label: "URL"
+      description: "The link URL, Optional"
+      preview: "http://example.com"
+    title:
+      type: "render"
+      label: "Title"
+      description: "Tooltip title"
+      preview: "Lorem ipsum dolor sit amet"
+  libraries:
+    - pattern_tooltip:
+        js:
+          tooltip.js: {}