From a3ba3b5161726745ae9e25e3dd3d982b8a674c6c Mon Sep 17 00:00:00 2001
From: Stefan Dragomir <stefan.n.dragomir@gmail.com>
Date: Wed, 9 Apr 2025 13:03:10 +0300
Subject: [PATCH] FORMS-18644: Desktop, RWD Tablet, RWD Mobile - Controls have
 same name but different actions @sunnym @vavarshn

---
 .../af-commons/v1/fieldTemplates/questionMark.html        | 8 +++++---
 .../components/form/accordion/v1/accordion/accordion.html | 3 +--
 .../core/fd/components/form/button/v1/button/button.html  | 2 +-
 .../core/fd/components/form/button/v2/button/button.html  | 2 +-
 .../fd/components/form/checkbox/v1/checkbox/checkbox.html | 2 +-
 .../checkboxgroup/v1/checkboxgroup/checkboxgroup.html     | 2 +-
 .../form/datepicker/v1/datepicker/datepicker.html         | 2 +-
 .../fd/components/form/dropdown/v1/dropdown/dropdown.html | 2 +-
 .../form/emailinput/v1/emailinput/emailinput.html         | 2 +-
 .../components/form/fileinput/v1/fileinput/fileinput.html | 2 +-
 .../components/form/fileinput/v2/fileinput/fileinput.html | 2 +-
 .../components/form/fileinput/v3/fileinput/fileinput.html | 4 ++--
 .../fd/components/form/fragment/v1/fragment/fragment.html | 2 +-
 .../form/numberinput/v1/numberinput/numberinput.html      | 2 +-
 .../panelcontainer/v1/panelcontainer/responsiveGrid.html  | 2 +-
 .../form/panelcontainer/v1/panelcontainer/simple.html     | 2 +-
 .../form/radiobutton/v1/radiobutton/radiobutton.html      | 2 +-
 .../core/fd/components/form/switch/v1/switch/switch.html  | 2 +-
 .../components/form/tabsontop/v1/tabsontop/tabsontop.html | 2 +-
 .../telephoneinput/v1/telephoneinput/telephoneinput.html  | 2 +-
 .../v1/termsandconditions/termsandconditions.html         | 2 +-
 .../components/form/textinput/v1/textinput/textinput.html | 2 +-
 .../form/verticaltabs/v1/verticaltabs/verticaltabs.html   | 2 +-
 .../core/fd/components/form/wizard/v1/wizard/wizard.html  | 2 +-
 .../core/fd/components/form/wizard/v2/wizard/wizard.html  | 2 +-
 25 files changed, 30 insertions(+), 29 deletions(-)

diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/af-commons/v1/fieldTemplates/questionMark.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/af-commons/v1/fieldTemplates/questionMark.html
index 0ebd6098e9..00861cd472 100644
--- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/af-commons/v1/fieldTemplates/questionMark.html
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/af-commons/v1/fieldTemplates/questionMark.html
@@ -1,4 +1,6 @@
-<template data-sly-template.questionMark="${@ componentId, longDescription, bemBlock}">
-  <button class="${bemBlock}__questionmark" data-sly-test="${longDescription}" title="Help text">
+<template data-sly-template.questionMark="${@ componentId, longDescription, bemBlock, componentTitle}">
+  <sly data-sly-set.namedTitle="${componentTitle} help text" />
+  <sly data-sly-set.fullTitle="${componentTitle ? namedTitle : 'Help text'}" />
+  <button class="${bemBlock}__questionmark" data-sly-test="${longDescription}" title="${fullTitle}">
   </button>
-</template>
+</template>
\ No newline at end of file
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/accordion/v1/accordion/accordion.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/accordion/v1/accordion/accordion.html
index a2ff540499..4b4db5d5da 100644
--- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/accordion/v1/accordion/accordion.html
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/accordion/v1/accordion/accordion.html
@@ -32,8 +32,7 @@
     <div class="cmp-accordion__label-container">
       <div data-sly-call="${label.label @componentId=accordion.id, labelValue=accordion.label.value, labelVisible=accordion.label.visible, labelRichText=accordion.label.richText, bemBlock='cmp-accordion'}"
           data-sly-unwrap></div>
-      <div data-sly-call="${questionMark.questionMark @componentId=accordion.id, longDescription=accordion.description, bemBlock='cmp-accordion'}"
-          data-sly-unwrap></div>
+          <div data-sly-call="${questionMark.questionMark @componentId=accordion.id, longDescription=accordion.description, bemBlock='cmp-accordion', componentTitle=accordion.label.value}" data-sly-unwrap></div>
     </div>
     <div data-sly-call="${shortDescription.shortDescription @componentId=accordion.id, shortDescriptionVisible=accordion.tooltipVisible, shortDescription=accordion.tooltip, bemBlock='cmp-accordion'}"
          data-sly-unwrap></div>
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/button/v1/button/button.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/button/v1/button/button.html
index e3d9eed303..84bb9c6452 100644
--- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/button/v1/button/button.html
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/button/v1/button/button.html
@@ -28,7 +28,7 @@
      data-cmp-is="adaptiveFormButton"
      data-cmp-adaptiveformcontainer-path="${formstructparser.formContainerPath}">
   <div class="cmp-adaptiveform-button__help-container">
-    <div data-sly-call="${questionMark.questionMark @componentId=button.id, longDescription=button.description, bemBlock='cmp-adaptiveform-button'}" data-sly-unwrap></div>
+    <div data-sly-call="${questionMark.questionMark @componentId=button.id, longDescription=button.description, bemBlock='cmp-adaptiveform-button', componentTitle=button.label.value}" data-sly-unwrap></div>
   </div>
   <button
       type="button"
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/button/v2/button/button.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/button/v2/button/button.html
index c2f938929c..7666b32867 100644
--- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/button/v2/button/button.html
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/button/v2/button/button.html
@@ -28,7 +28,7 @@
      data-cmp-is="adaptiveFormButton"
      data-cmp-adaptiveformcontainer-path="${formstructparser.formContainerPath}">
   <div class="cmp-adaptiveform-button__help-container">
-    <div data-sly-call="${questionMark.questionMark @componentId=button.id, longDescription=button.description, bemBlock='cmp-adaptiveform-button'}" data-sly-unwrap></div>
+    <div data-sly-call="${questionMark.questionMark @componentId=button.id, longDescription=button.description, bemBlock='cmp-adaptiveform-button', componentTitle=button.label.value}" data-sly-unwrap></div>
   </div>
   <!-- Button is disabled to prevent the button from being clicked before JS is initialized, else it would default to HTML form submit behavior -->
   <button
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkbox/v1/checkbox/checkbox.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkbox/v1/checkbox/checkbox.html
index cfa5fae183..0976d89e6f 100644
--- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkbox/v1/checkbox/checkbox.html
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkbox/v1/checkbox/checkbox.html
@@ -33,7 +33,7 @@
      data-sly-test.widgetId="${'{0}-{1}' @ format=[checkbox.id, 'widget']}"
      data-cmp-adaptiveformcontainer-path="${formstructparser.formContainerPath}">
      <div class="cmp-adaptiveform-checkbox__help-container">
-      <div data-sly-call="${questionMark.questionMark @componentId=checkbox.id, longDescription=checkbox.description, bemBlock='cmp-adaptiveform-checkbox'}" data-sly-unwrap></div>
+      <div data-sly-call="${questionMark.questionMark @componentId=checkbox.id, longDescription=checkbox.description, bemBlock='cmp-adaptiveform-checkbox', componentTitle=checkbox.label.value}" data-sly-unwrap></div>
     </div>
 
     <div class="cmp-adaptiveform-checkbox__widget-container">
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkboxgroup/v1/checkboxgroup/checkboxgroup.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkboxgroup/v1/checkboxgroup/checkboxgroup.html
index 3c524e065c..25d02ac4cf 100644
--- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkboxgroup/v1/checkboxgroup/checkboxgroup.html
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/checkboxgroup/v1/checkboxgroup/checkboxgroup.html
@@ -36,7 +36,7 @@
      data-sly-test.widgetId="${'{0}-{1}' @ format=[checkboxgroup.id, 'widget']}">
     <div class="cmp-adaptiveform-checkboxgroup__label-container">
         <div data-sly-call="${label.label @componentId=widgetId, labelValue=checkboxgroup.label.value, labelVisible=checkboxgroup.label.visible, labelRichText=checkboxgroup.label.richText, bemBlock='cmp-adaptiveform-checkboxgroup'}" data-sly-unwrap></div>
-        <div data-sly-call="${questionMark.questionMark @componentId=checkboxgroup.id, longDescription=checkboxgroup.description, bemBlock='cmp-adaptiveform-checkboxgroup'}" data-sly-unwrap></div>
+        <div data-sly-call="${questionMark.questionMark @componentId=checkboxgroup.id, longDescription=checkboxgroup.description, bemBlock='cmp-adaptiveform-checkboxgroup', componentTitle=checkboxgroup.label.value}" data-sly-unwrap></div>
     </div>
     <sly data-sly-call="${widget.widget @ checkboxgroup = checkboxgroup}"></sly>
     <div data-sly-call="${shortDescription.shortDescription @componentId=checkboxgroup.id, shortDescriptionVisible=checkboxgroup.tooltipVisible, shortDescription=checkboxgroup.tooltip, bemBlock='cmp-adaptiveform-checkboxgroup'}" data-sly-unwrap>
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/datepicker/v1/datepicker/datepicker.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/datepicker/v1/datepicker/datepicker.html
index 4326e7e89d..49ac783fd5 100644
--- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/datepicker/v1/datepicker/datepicker.html
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/datepicker/v1/datepicker/datepicker.html
@@ -33,7 +33,7 @@
      data-sly-test.widgetId="${'{0}-{1}' @ format=[datePicker.id, 'widget']}">
      <div class="cmp-adaptiveform-datepicker__label-container">
         <div data-sly-call="${label.label @componentId=widgetId, labelValue=datePicker.label.value, labelVisible=datePicker.label.visible, labelRichText=datePicker.label.richText, bemBlock='cmp-adaptiveform-datepicker'}" data-sly-unwrap></div>
-        <div data-sly-call="${questionMark.questionMark @componentId=datePicker.id, longDescription=datePicker.description, bemBlock='cmp-adaptiveform-datepicker'}" data-sly-unwrap></div>
+        <div data-sly-call="${questionMark.questionMark @componentId=datePicker.id, longDescription=datePicker.description, bemBlock='cmp-adaptiveform-datepicker', componentTitle=datePicker.label.value}" data-sly-unwrap></div>
      </div>
      <input type="date"
             name="${datePicker.name}"
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/dropdown/v1/dropdown/dropdown.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/dropdown/v1/dropdown/dropdown.html
index 0f2ef18653..388f43c83d 100644
--- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/dropdown/v1/dropdown/dropdown.html
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/dropdown/v1/dropdown/dropdown.html
@@ -34,7 +34,7 @@
      data-sly-test.widgetId="${'{0}-{1}' @ format=[dropdown.id, 'widget']}">
     <div class="cmp-adaptiveform-dropdown__label-container">
       <div data-sly-call="${label.label @componentId=widgetId, labelValue=dropdown.label.value, labelVisible=dropdown.label.visible, labelRichText=dropdown.label.richText, bemBlock='cmp-adaptiveform-dropdown'}" data-sly-unwrap></div>
-      <div data-sly-call="${questionMark.questionMark @componentId=dropdown.id, longDescription=dropdown.description, bemBlock='cmp-adaptiveform-dropdown'}" data-sly-unwrap></div>
+      <div data-sly-call="${questionMark.questionMark @componentId=dropdown.id, longDescription=dropdown.description, bemBlock='cmp-adaptiveform-dropdown', componentTitle=dropdown.label.value}" data-sly-unwrap></div>
     </div>
     <select class="cmp-adaptiveform-dropdown__widget"
             id="${widgetId}"
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/emailinput/v1/emailinput/emailinput.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/emailinput/v1/emailinput/emailinput.html
index b352146248..ab540026cf 100644
--- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/emailinput/v1/emailinput/emailinput.html
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/emailinput/v1/emailinput/emailinput.html
@@ -34,7 +34,7 @@
      data-sly-test.widgetId="${'{0}-{1}' @ format=[email.id, 'widget']}">
     <div class="cmp-adaptiveform-emailinput__label-container">
       <div data-sly-call="${label.label @componentId=widgetId, labelValue=email.label.value, labelVisible=email.label.visible, labelRichText=email.label.richText, bemBlock='cmp-adaptiveform-emailinput'}" data-sly-unwrap></div>
-      <div data-sly-call="${questionMark.questionMark @componentId=email.id, longDescription=email.description, bemBlock='cmp-adaptiveform-emailinput'}" data-sly-unwrap></div>
+      <div data-sly-call="${questionMark.questionMark @componentId=email.id, longDescription=email.description, bemBlock='cmp-adaptiveform-emailinput', componentTitle=email.label.value}" data-sly-unwrap></div>
     </div>
     <input title="${email.tooltipVisible ? '' : email.tooltipText}"
            class="cmp-adaptiveform-emailinput__widget"
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v1/fileinput/fileinput.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v1/fileinput/fileinput.html
index c170dea080..2c128d3699 100644
--- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v1/fileinput/fileinput.html
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v1/fileinput/fileinput.html
@@ -32,7 +32,7 @@
      data-cmp-adaptiveformcontainer-path="${formstructparser.formContainerPath}">
     <div class="cmp-adaptiveform-fileinput__label-container">
       <div data-sly-call="${label.label @componentId=file.id, labelValue=file.label.value, labelVisible=file.label.visible, labelRichText=file.label.richText, bemBlock='cmp-adaptiveform-fileinput'}" data-sly-unwrap></div>
-      <div data-sly-call="${questionMark.questionMark @componentId=file.id, longDescription=file.description, bemBlock='cmp-adaptiveform-fileinput'}" data-sly-unwrap></div>
+      <div data-sly-call="${questionMark.questionMark @componentId=file.id, longDescription=file.description, bemBlock='cmp-adaptiveform-fileinput', componentTitle=file.label.value}" data-sly-unwrap></div>
     </div>
     </br>
     <label data-sly-test="${file.buttonText}" for="${file.id}_widget" tabindex="0" role="button" class="cmp-adaptiveform-fileinput__widgetlabel">${file.buttonText}</label>
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v2/fileinput/fileinput.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v2/fileinput/fileinput.html
index 22502dc556..797b9d5360 100644
--- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v2/fileinput/fileinput.html
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v2/fileinput/fileinput.html
@@ -32,7 +32,7 @@
      data-cmp-adaptiveformcontainer-path="${formstructparser.formContainerPath}">
     <div class="cmp-adaptiveform-fileinput__label-container">
       <div data-sly-call="${label.label @componentId=file.id, labelValue=file.label.value, labelVisible=file.label.visible, labelRichText=file.label.richText, bemBlock='cmp-adaptiveform-fileinput'}" data-sly-unwrap></div>
-      <div data-sly-call="${questionMark.questionMark @componentId=file.id, longDescription=file.description, bemBlock='cmp-adaptiveform-fileinput'}" data-sly-unwrap></div>
+      <div data-sly-call="${questionMark.questionMark @componentId=file.id, longDescription=file.description, bemBlock='cmp-adaptiveform-fileinput', componentTitle=file.label.value}" data-sly-unwrap></div>
     </div>
     </br>
     <div class="cmp-adaptiveform-fileinput__container">
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v3/fileinput/fileinput.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v3/fileinput/fileinput.html
index 2d0dce4909..c2a91c8aec 100644
--- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v3/fileinput/fileinput.html
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fileinput/v3/fileinput/fileinput.html
@@ -35,8 +35,8 @@
   data-cmp-adaptiveformcontainer-path="${formstructparser.formContainerPath}">
  <div class="cmp-adaptiveform-fileinput__label-container">
    <div data-sly-call="${label.label @componentId=file.id, labelValue=file.label.value, labelVisible=file.label.visible, labelRichText=file.label.richText, bemBlock='cmp-adaptiveform-fileinput'}" data-sly-unwrap></div>
-   <div data-sly-call="${questionMark.questionMark @componentId=file.id, longDescription=file.description, bemBlock='cmp-adaptiveform-fileinput'}" data-sly-unwrap></div>
- </div>
+   <div data-sly-call="${questionMark.questionMark @componentId=fragment.id, longDescription=fragment.description, bemBlock='cmp-adaptiveform-fragment', componentTitle=file.label.value}" data-sly-unwrap></div>
+        </div>
  </br>
  <div class="cmp-adaptiveform-fileinput__container">
    <div class="cmp-adaptiveform-fileinput__dragarea">
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fragment/v1/fragment/fragment.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fragment/v1/fragment/fragment.html
index 25db840288..38230d24e0 100644
--- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fragment/v1/fragment/fragment.html
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/fragment/v1/fragment/fragment.html
@@ -36,7 +36,7 @@
          style="${container.backgroundStyle @ context='styleString'}">
         <div class="cmp-adaptiveform-fragment__label-container">
           <div data-sly-call="${label.label @componentId=fragment.id, labelValue=label.label.value, labelVisible=label.label.visible, bemBlock='cmp-adaptiveform-fragment'}" data-sly-unwrap></div>
-          <div data-sly-call="${questionMark.questionMark @componentId=fragment.id, longDescription=fragment.description, bemBlock='cmp-adaptiveform-fragment'}" data-sly-unwrap></div>
+          <div data-sly-call="${questionMark.questionMark @componentId=fragment.id, longDescription=fragment.description, bemBlock='cmp-adaptiveform-fragment', componentTitle=label.label.value}" data-sly-unwrap></div>
         </div>
         <div data-sly-call="${shortDescription.shortDescription @componentId=fragment.id, shortDescriptionVisible=fragment.tooltipVisible, shortDescription=fragment.tooltip, bemBlock='cmp-adaptiveform-fragment'}" data-sly-unwrap></div>
         <div data-sly-call="${longDescription.longDescription @componentId=fragment.id, longDescription=fragment.description, bemBlock='cmp-adaptiveform-fragment'}" data-sly-unwrap></div>
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/numberinput/v1/numberinput/numberinput.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/numberinput/v1/numberinput/numberinput.html
index d1cf01778c..426f36ef1a 100644
--- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/numberinput/v1/numberinput/numberinput.html
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/numberinput/v1/numberinput/numberinput.html
@@ -34,7 +34,7 @@
      data-sly-test.widgetId="${'{0}-{1}' @ format=[numberinput.id, 'widget']}">
     <div class="cmp-adaptiveform-numberinput__label-container">
       <div data-sly-call="${label.label @componentId=widgetId, labelValue=numberinput.label.value, labelVisible=numberinput.label.visible, labelRichText=numberinput.label.richText, bemBlock='cmp-adaptiveform-numberinput'}" data-sly-unwrap></div>
-      <div data-sly-call="${questionMark.questionMark @componentId=numberinput.id, longDescription=numberinput.description, bemBlock='cmp-adaptiveform-numberinput'}" data-sly-unwrap></div>
+      <div data-sly-call="${questionMark.questionMark @componentId=numberinput.id, longDescription=numberinput.description, bemBlock='cmp-adaptiveform-numberinput', componentTitle=numberinput.label.value}" data-sly-unwrap></div>
     </div>
     <input
             class="cmp-adaptiveform-numberinput__widget"
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/panelcontainer/v1/panelcontainer/responsiveGrid.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/panelcontainer/v1/panelcontainer/responsiveGrid.html
index 9fd65d7c82..6af5dbb19c 100644
--- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/panelcontainer/v1/panelcontainer/responsiveGrid.html
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/panelcontainer/v1/panelcontainer/responsiveGrid.html
@@ -28,7 +28,7 @@
          style="${container.backgroundStyle @ context='styleString'}">
         <div class="cmp-container__label-container">
           <div data-sly-call="${label.label @componentId=panel.id, labelValue=panel.label.value, labelVisible=panel.label.visible, labelRichText=panel.label.richText, bemBlock='cmp-container'}" data-sly-unwrap></div>
-          <div data-sly-call="${questionMark.questionMark @componentId=panel.id, longDescription=panel.description, bemBlock='cmp-container'}" data-sly-unwrap></div>
+          <div data-sly-call="${questionMark.questionMark @componentId=panel.id, longDescription=panel.description, bemBlock='cmp-container', componentTitle=panel.label.value}" data-sly-unwrap></div>
         </div>
         <div data-sly-call="${shortDescription.shortDescription @componentId=panel.id, shortDescriptionVisible=panel.tooltipVisible, shortDescription=panel.tooltip, bemBlock='cmp-container'}" data-sly-unwrap></div>
         <div data-sly-call="${longDescription.longDescription @componentId=panel.id, longDescription=panel.description, bemBlock='cmp-container'}" data-sly-unwrap></div>
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/panelcontainer/v1/panelcontainer/simple.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/panelcontainer/v1/panelcontainer/simple.html
index 219b6a1795..a29ecae602 100644
--- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/panelcontainer/v1/panelcontainer/simple.html
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/panelcontainer/v1/panelcontainer/simple.html
@@ -30,7 +30,7 @@
          style="${container.backgroundStyle @ context='styleString'}">
         <div class="cmp-container__label-container">
           <div data-sly-call="${label.label @componentId=panel.id, labelValue=panel.label.value, labelVisible=panel.label.visible, labelRichText=panel.label.richText, bemBlock='cmp-container'}" data-sly-unwrap></div>
-          <div data-sly-call="${questionMark.questionMark @componentId=panel.id, longDescription=panel.description, bemBlock='cmp-container'}" data-sly-unwrap></div>
+          <div data-sly-call="${questionMark.questionMark @componentId=panel.id, longDescription=panel.description, bemBlock='cmp-container', componentTitle=panel.label.value}" data-sly-unwrap></div>
         </div>
         <div data-sly-call="${shortDescription.shortDescription @componentId=panel.id, shortDescriptionVisible=panel.tooltipVisible, shortDescription=panel.tooltip, bemBlock='cmp-container'}" data-sly-unwrap></div>
         <div data-sly-call="${longDescription.longDescription @componentId=panel.id, longDescription=panel.description, bemBlock='cmp-container'}" data-sly-unwrap></div>
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/radiobutton/v1/radiobutton/radiobutton.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/radiobutton/v1/radiobutton/radiobutton.html
index 1cb200a00d..bb110f4c4f 100644
--- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/radiobutton/v1/radiobutton/radiobutton.html
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/radiobutton/v1/radiobutton/radiobutton.html
@@ -36,7 +36,7 @@
      data-sly-test.widgetId="${'{0}-{1}' @ format=[radioButton.id, 'widget']}">
     <div class="cmp-adaptiveform-radiobutton__label-container">
       <div data-sly-call="${label.label @componentId=widgetId, labelValue=radioButton.label.value, labelVisible=radioButton.label.visible, labelRichText=radioButton.label.richText, bemBlock='cmp-adaptiveform-radiobutton'}" data-sly-unwrap></div>
-      <div data-sly-call="${questionMark.questionMark @componentId=radiobutton.id, longDescription=radioButton.description, bemBlock='cmp-adaptiveform-radiobutton'}" data-sly-unwrap></div>
+      <div data-sly-call="${questionMark.questionMark @componentId=radiobutton.id, longDescription=radioButton.description, bemBlock='cmp-adaptiveform-radiobutton', componentTitle=radioButton.label.value}" data-sly-unwrap></div>
     </div>
     <div class="cmp-adaptiveform-radiobutton__widget ${radioButton.orientation}" id="${widgetId}" role="radiogroup">
       <div data-sly-list="${radioButton.enums}" data-sly-unwrap>
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/switch/v1/switch/switch.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/switch/v1/switch/switch.html
index 4565b72af5..6ec3b1c00d 100644
--- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/switch/v1/switch/switch.html
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/switch/v1/switch/switch.html
@@ -34,7 +34,7 @@
      data-cmp-adaptiveformcontainer-path="${formstructparser.formContainerPath}">
     <div class="cmp-adaptiveform-switch__label-container">
         <div data-sly-call="${label.label @componentId=widgetId, labelValue=switch.label.value, labelVisible=switch.label.visible, labelRichText=switch.label.richText, bemBlock='cmp-adaptiveform-switch'}" data-sly-unwrap></div>
-        <div data-sly-call="${questionMark.questionMark @componentId=switch.id, longDescription=switch.description, bemBlock='cmp-adaptiveform-switch'}" data-sly-unwrap></div>
+        <div data-sly-call="${questionMark.questionMark @componentId=switch.id, longDescription=switch.description, bemBlock='cmp-adaptiveform-switch', componentTitle=switch.label.value}" data-sly-unwrap></div>
     </div>
 
     <div class="cmp-adaptiveform-switch__container" id="${widgetId}">
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/tabsontop/v1/tabsontop/tabsontop.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/tabsontop/v1/tabsontop/tabsontop.html
index 830b4fc67a..9de9f0fcdc 100644
--- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/tabsontop/v1/tabsontop/tabsontop.html
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/tabsontop/v1/tabsontop/tabsontop.html
@@ -30,7 +30,7 @@
   data-sly-test.widgetId="${'{0}-{1}' @ format=[panel.id, 'widget']}">
      <div class="cmp-tabs__label-container">
       <div data-sly-call="${label.label @componentId=widgetId, labelValue=panel.label.value, labelVisible=panel.label.visible, labelRichText=panel.label.richText, bemBlock='cmp-tabs'}" data-sly-unwrap></div>
-      <div data-sly-call="${questionMark.questionMark @componentId=panel.id, longDescription=panel.description, bemBlock='cmp-tabs'}" data-sly-unwrap></div>
+      <div data-sly-call="${questionMark.questionMark @componentId=panel.id, longDescription=panel.description, bemBlock='cmp-tabs', componentTitle=panel.label.value}" data-sly-unwrap></div>
      </div>
      <div data-sly-call="${shortDescription.shortDescription @componentId=panel.id, shortDescriptionVisible=panel.tooltipVisible, shortDescription=panel.tooltip, bemBlock='cmp-tabs'}" data-sly-unwrap></div>
      <div data-sly-call="${longDescription.longDescription @componentId=panel.id, longDescription=panel.description, bemBlock='cmp-tabs'}" data-sly-unwrap></div>
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephoneinput/v1/telephoneinput/telephoneinput.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephoneinput/v1/telephoneinput/telephoneinput.html
index 3b04de89ce..5da45a80c4 100644
--- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephoneinput/v1/telephoneinput/telephoneinput.html
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephoneinput/v1/telephoneinput/telephoneinput.html
@@ -34,7 +34,7 @@
      data-sly-test.widgetId="${'{0}-{1}' @ format=[telText.id, 'widget']}">
     <div class="cmp-adaptiveform-telephoneinput__label-container">
       <div data-sly-call="${label.label @componentId=widgetIdd, labelValue=telText.label.value, labelVisible=telText.label.visible, labelRichText=telText.label.richText, bemBlock='cmp-adaptiveform-telephoneinput'}" data-sly-unwrap></div>
-      <div data-sly-call="${questionMark.questionMark @componentId=telText.id, longDescription=telText.description, bemBlock='cmp-adaptiveform-telephoneinput'}" data-sly-unwrap></div>
+      <div data-sly-call="${questionMark.questionMark @componentId=telText.id, longDescription=telText.description, bemBlock='cmp-adaptiveform-telephoneinput', componentTitle=telText.label.value}" data-sly-unwrap></div>
     </div>
     <input title="${telText.tooltipVisible ? '' : telText.tooltipText}"
            class="cmp-adaptiveform-telephoneinput__widget"
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/termsandconditions/v1/termsandconditions/termsandconditions.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/termsandconditions/v1/termsandconditions/termsandconditions.html
index 31f0c75971..4c8f70c7b9 100644
--- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/termsandconditions/v1/termsandconditions/termsandconditions.html
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/termsandconditions/v1/termsandconditions/termsandconditions.html
@@ -33,7 +33,7 @@
      data-cmp-adaptiveformcontainer-path="${formstructparser.formContainerPath}">
     <div class="cmp-adaptiveform-termsandcondition__label-container">
         <div data-sly-call="${label.label @componentId=tnc.id, labelValue=tnc.label.value, labelVisible=tnc.label.visible, labelRichText=tnc.label.richText, bemBlock='cmp-adaptiveform-termsandcondition'}" data-sly-unwrap></div>
-        <div data-sly-call="${questionMark.questionMark @componentId=tnc.id, longDescription=tnc.description, bemBlock='cmp-adaptiveform-termsandcondition'}" data-sly-unwrap></div>
+        <div data-sly-call="${questionMark.questionMark @componentId=tnc.id, longDescription=tnc.description, bemBlock='cmp-adaptiveform-termsandcondition', componentTitle=tnc.label.value}" data-sly-unwrap></div>
     </div>
     <div class="cmp-adaptiveform-termsandcondition__content-container ${!wcmmode.edit && tnc.showAsPopup ? 'cmp-adaptiveform-termsandcondition__content-container--modal' : ''}"
          data-cmp-visible="${tnc.showAsPopup ? 'false' : 'true'}">
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/textinput/v1/textinput/textinput.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/textinput/v1/textinput/textinput.html
index ebf4835dad..38cc870dc7 100644
--- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/textinput/v1/textinput/textinput.html
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/textinput/v1/textinput/textinput.html
@@ -34,7 +34,7 @@
      data-sly-test.widgetId="${'{0}-{1}' @ format=[text.id, 'widget']}">
     <div class="cmp-adaptiveform-textinput__label-container">
       <div data-sly-call="${label.label @componentId=widgetId, labelValue=text.label.value, labelVisible=text.label.visible, labelRichText=text.label.richText, bemBlock='cmp-adaptiveform-textinput'}" data-sly-unwrap></div>
-      <div data-sly-call="${questionMark.questionMark @componentId=text.id, longDescription=text.description, bemBlock='cmp-adaptiveform-textinput'}" data-sly-unwrap></div>
+      <div data-sly-call="${questionMark.questionMark @componentId=text.id, longDescription=text.description, bemBlock='cmp-adaptiveform-textinput', componentTitle=text.label.value}" data-sly-unwrap></div>
     </div>
     <textarea data-sly-test.useTextarea="${text.multiLine}"
               title="${text.tooltipVisible ? '' : text.tooltipText}"
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/verticaltabs/v1/verticaltabs/verticaltabs.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/verticaltabs/v1/verticaltabs/verticaltabs.html
index ebcdcfaa42..b9af49c905 100644
--- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/verticaltabs/v1/verticaltabs/verticaltabs.html
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/verticaltabs/v1/verticaltabs/verticaltabs.html
@@ -30,7 +30,7 @@
   data-sly-test.widgetId="${'{0}-{1}' @ format=[panel.id, 'widget']}">
      <div class="cmp-verticaltabs__label-container">
         <div data-sly-call="${label.label @componentId=widgetId, labelValue=panel.label.value, labelVisible=panel.label.visible, labelRichText=panel.label.richText, bemBlock='cmp-verticaltabs'}" data-sly-unwrap></div>
-        <div data-sly-call="${questionMark.questionMark @componentId=panel.id, longDescription=panel.description, bemBlock='cmp-verticaltabs'}" data-sly-unwrap></div>
+        <div data-sly-call="${questionMark.questionMark @componentId=panel.id, longDescription=panel.description, bemBlock='cmp-verticaltabs', componentTitle=panel.label.value}" data-sly-unwrap></div>
      </div>
      <div data-sly-call="${shortDescription.shortDescription @componentId=panel.id, shortDescriptionVisible=panel.tooltipVisible, shortDescription=panel.tooltip, bemBlock='cmp-verticaltabs'}" data-sly-unwrap></div>
      <div data-sly-call="${longDescription.longDescription @componentId=panel.id, longDescription=panel.description, bemBlock='cmp-verticaltabs'}" data-sly-unwrap></div>
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/wizard.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/wizard.html
index f806f46cad..e143473573 100644
--- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/wizard.html
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/wizard.html
@@ -33,7 +33,7 @@
         data-sly-test.widgetId="${'{0}-{1}' @ format=[wizard.id, 'widget']}">
         <div class="cmp-adaptiveform-wizard__label-container">
           <div data-sly-call="${label.label @componentId=widgetId, labelValue=wizard.label.value, labelVisible=wizard.label.visible, labelRichText=wizard.label.richText, bemBlock='cmp-adaptiveform-wizard'}" data-sly-unwrap></div>
-          <div data-sly-call="${questionMark.questionMark @componentId=wizard.id, longDescription=wizard.description, bemBlock='cmp-adaptiveform-wizard'}" data-sly-unwrap></div>
+          <div data-sly-call="${questionMark.questionMark @componentId=wizard.id, longDescription=wizard.description, bemBlock='cmp-adaptiveform-wizard', componentTitle=wizard.label.value}" data-sly-unwrap></div>
         </div>
         <div data-sly-call="${shortDescription.shortDescription @componentId=wizard.id, shortDescriptionVisible=wizard.tooltipVisible, shortDescription=wizard.tooltip, bemBlock='cmp-adaptiveform-wizard'}" data-sly-unwrap></div>
         <div data-sly-call="${longDescription.longDescription @componentId=wizard.id, longDescription=wizard.description, bemBlock='cmp-adaptiveform-wizard'}" data-sly-unwrap></div>
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v2/wizard/wizard.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v2/wizard/wizard.html
index 28441ef100..90f4e0e1db 100644
--- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v2/wizard/wizard.html
+++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v2/wizard/wizard.html
@@ -33,7 +33,7 @@
   data-sly-test.widgetId="${'{0}-{1}' @ format=[wizard.id, 'widget']}">
   <div class="cmp-adaptiveform-wizard__label-container">
       <div data-sly-call="${label.label @componentId=widgetId, labelValue=wizard.label.value, labelVisible=wizard.label.visible, labelRichText=wizard.label.richText, bemBlock='cmp-adaptiveform-wizard'}" data-sly-unwrap></div>
-    <div data-sly-call="${questionMark.questionMark @componentId=wizard.id, longDescription=wizard.description, bemBlock='cmp-adaptiveform-wizard'}" data-sly-unwrap></div>
+      <div data-sly-call="${questionMark.questionMark @componentId=wizard.id, longDescription=wizard.description, bemBlock='cmp-adaptiveform-wizard', componentTitle=wizard.label.value}" data-sly-unwrap></div>
   </div>
   <div data-sly-call="${shortDescription.shortDescription @componentId=wizard.id, shortDescriptionVisible=wizard.tooltipVisible, shortDescription=wizard.tooltip, bemBlock='cmp-adaptiveform-wizard'}" data-sly-unwrap></div>
   <div data-sly-call="${longDescription.longDescription @componentId=wizard.id, longDescription=wizard.description, bemBlock='cmp-adaptiveform-wizard'}" data-sly-unwrap></div>