introduce helpInlinePopup

bundle/src/main/resources/angularjs-partials/configTable.html

@@ -18,7 +18,7 @@ <h3 bo-text="config.collectionItemName"></h3>
             <span class="coral-Checkbox-checkmark"></span>
             <span class="coral-Checkbox-description" bo-text="i18n('config.inheritance.property')"></span>
           </label>
-          <caconfig-description-popup content="i18n('config.inheritance.propertyDescription')"></caconfig-description-popup>
+          <caconfig-help-inline-popup content="i18n('config.inheritance.propertyDescription')"></caconfig-help-inline-popup>
         </div>
         <p class="caconfig-if-not-preview caconfig-if-config-inherited">
           <span class="caconfig-if-is-collection" bo-text="i18n('config.inheritance.collectionItem')"></span>

bundle/src/main/resources/angularjs-partials/descriptionPopup.html

@@ -1,4 +1,4 @@
-<div class="caconfig-description-popup" bindonce="descriptionPopupReady">
+<div bindonce="descriptionPopupReady">
   <button is="coral-button" bo-id="id" variant="minimal" icon="infoCircle" iconsize="M"></button>
   <coral-popover placement="left" bo-attr bo-attr-target="'#' + id"></coral-popover>
 </div>

bundle/src/main/resources/angularjs-partials/helpInlinePopup.html

@@ -0,0 +1,4 @@
+<span class="caconfig-help-inline-popup" bindonce="helpInlinePopupReady">
+  <button is="coral-button" bo-id="id" variant="minimal" icon="infoCircle" iconsize="S"></button>
+  <coral-popover placement="right" bo-attr bo-attr-target="'#' + id"></coral-popover>
+</span>

bundle/src/main/webapp/app-root/clientlibs/io.wcm.caconfig.editor/css/editor.css

@@ -230,16 +230,14 @@ span.caconfig-tagbrowser {
   margin-right: 0.5rem;
 }
 
-.caconfig-property-inheritance .caconfig-description-popup {
-  display: inline;
+.caconfig-help-inline-popup button {
+  padding: 0;
+  min-height: 0;
+  margin-top: 8px;
+}
+.coral-Table-headerCell .caconfig-help-inline-popup {
   text-transform: none;
   font-size: 14px;
   font-weight: normal;
   letter-spacing: 0;
 }
-.caconfig-property-inheritance .caconfig-description-popup button {
-  padding: 0;
-  min-height: 0;
-  height: 20px;
-  margin-top: 8px;
-}

bundle/src/main/webapp/app-root/clientlibs/io.wcm.caconfig.editor/js.txt

@@ -33,6 +33,7 @@ widgets/widgets.module.js
 widgets/widgets.constants.js
 widgets/config-table.directive.js
 widgets/description-popup.directive.js
+widgets/help-inline-popup.directive.js
 widgets/multifield.directive.js
 widgets/pathbrowser.directive.js
 widgets/property-dropdown.directive.js

bundle/src/main/webapp/app-root/clientlibs/io.wcm.caconfig.editor/js/widgets/help-inline-popup.directive.js

@@ -0,0 +1,69 @@
+/*
+ * #%L
+ * wcm.io
+ * %%
+ * Copyright (C) 2024 wcm.io
+ * %%
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * #L%
+ */
+(function (angular, Coral) {
+  "use strict";
+
+  /**
+   * Directive to render the "i" button with a popover for the decription of the property.
+   * Wraps a Coral UI Button and Coral.Popover widget.
+   * This directive transcludes the popup content elements.
+   *
+   * @example
+   * <caconfig-description-popup>
+   *   <caconfig-popup-content content="Description Text">
+   *   </caconfig-popup-content>
+   * </caconfig-description-popup>
+   */
+  angular.module("io.wcm.caconfig.widgets")
+    .directive("caconfigHelpInlinePopup", helpInlinePopup);
+
+  helpInlinePopup.$inject = ["$timeout", "templateUrlList"];
+
+  function helpInlinePopup($timeout, templateList) {
+
+    var directive = {
+      restrict: "E",
+      replace: true,
+      templateUrl: templateList.helpInlinePopup,
+      link: link,
+      scope: {
+        content: "="
+      }
+    };
+
+    return directive;
+
+    function link(scope, element) {
+      scope.id = Coral.commons.getUID();
+
+      scope.$evalAsync(function () {
+        scope.helpInlinePopupReady = true;
+      });
+
+      $timeout(function() {
+        var $popover = element.find("coral-popover");
+        var popover = $popover[0];
+        Coral.commons.ready(popover, function() {
+          $popover.append($('<p class="u-coral-margin"></p>').text(scope.content));
+        });
+      }, false);
+    }
+  }
+}(angular, Coral));

bundle/src/main/webapp/app-root/clientlibs/io.wcm.caconfig.editor/js/widgets/widgets.constants.js

@@ -32,6 +32,7 @@
     .constant("templateUrlList", {
       configTable: "configTable.html",
       descriptionPopup: "descriptionPopup.html",
+      helpInlinePopup: "helpInlinePopup.html",
       multifield: "multifield.html",
       pathbrowser: "pathbrowser.html",
       propertyDropdown: "propertyDropdown.html",