Problem/Motivation

The version v1.10.2 of DSFR introduce the info-bulle/tooltip
https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/in...

Proposed resolution

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

Musa.thomas created an issue. See original summary.

pdureau’s picture

Title: Missing pattern info-bulle/tooltip » [beta6] Missing pattern info-bulle/tooltip
pdureau’s picture

It seems, this component has 3 props and no slots:

  • label textfield, instead of a slot, because only plain text is allowed
  • tooltip_id machine name, with random generation if empty
  • placement select, with top, left, center...

This little component looks tricky to implement:

  • the default state is "hidden", so using it for site-building from the front theme may be difficult
  • there are 2 parts in the markup, the trigger and the tooltip. Only the tooltip belongs to the component, but it doesn't make sense to use it without the trigger.

I will not be against considering this component as out of ui_suite_dsfr scope.

pdureau’s picture

Title: [beta6] Missing pattern info-bulle/tooltip » [beta7] Missing pattern info-bulle/tooltip
pdureau’s picture

Title: [beta7] Missing pattern info-bulle/tooltip » Missing pattern info-bulle/tooltip
Version: 1.0.0-beta5 » 1.0.x-dev
Status: Active » Postponed
pdureau’s picture

Humble draft:

--- a/templates/patterns/button/button.ui_patterns.yml
+++ b/templates/patterns/button/button.ui_patterns.yml
@@ -62,6 +62,11 @@ button:
         left: Right
         right: Left
       preview: left
+    tooltip:
+      type: textfield
+      label: Tooltip
+      description: https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/infobulle/
+      preview: Lorem [...] elit ut
     social:
       type: select
       label: Social networks
diff --git a/templates/patterns/button/pattern-button.html.twig b/templates/patterns/button/pattern-button.html.twig
index 534f478..805914d 100644
--- a/templates/patterns/button/pattern-button.html.twig
+++ b/templates/patterns/button/pattern-button.html.twig
@@ -20,6 +20,12 @@
   {% set attributes = attributes.setAttribute('disabled', true) %}
 {% endif %}
 
+{% if tooltip %}
+  {% set tooltip_id = "tooltip-" ~ random() %}
+  {% set attributes = attributes.addClass('fr-btn--tooltip').setAttribute("aria-describedby", tooltip_id) %}
+  <span class="fr-tooltip fr-placement" id="{{ tooltip_id }}" role="tooltip" aria-hidden="true">Lorem [...] elit ut.</span>
+{% endif %}
+
 {% if url or attributes.href %}
   {% set url = url|default(attributes.href) %}
   {% if external %}

pdureau’s picture

Title: Missing pattern info-bulle/tooltip » [beta7] Missing pattern info-bulle/tooltip
Status: Postponed » Active

yassrzg made their first commit to this issue’s fork.

yassrzg’s picture

Assigned: Unassigned » yassrzg
Status: Active » Needs work

yassrzg’s picture

Status: Needs work » Needs review
pdureau’s picture

Assigned: yassrzg » pdureau

  • pdureau committed 7714e24e on 1.0.x authored by yassrzg
    Issue #3405205 by yassrzg, pdureau: Missing pattern info-bulle/tooltip
    
pdureau’s picture

Assigned: pdureau » Unassigned
Status: Needs review » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.