Merge pull request #5957 from Countly/feat-add-tooltips-to-content-sidebar-input-component

[Feat] Add tooltips to content sidebar input component

Author: pnrgenc

frontend/express/public/javascripts/countly/vue/components/content.js

@@ -409,6 +409,11 @@
         template: CV.T('/javascripts/countly/vue/templates/content/UI/content-sidebar-input.html'),
 
         props: {
+            componentTooltip: {
+                default: null,
+                type: String
+            },
+
             disabled: {
                 default: false,
                 type: Boolean
@@ -419,6 +424,15 @@
                 type: String
             },
 
+            labelIcon: {
+                default: 'cly-io cly-io-question-mark-circle',
+                type: String
+            },
+            labelTooltip: {
+                default: null,
+                type: String
+            },
+
             options: {
                 default: () => [],
                 type: Array
@@ -457,6 +471,16 @@
             size: {
                 default: null,
                 type: String
+            },
+
+            withComponentTooltip: {
+                default: false,
+                type: Boolean
+            },
+
+            withLabelTooltip: {
+                default: false,
+                type: Boolean
             }
         },
 
@@ -498,6 +522,10 @@
                 return this.isDropdownInput && Array.isArray(this.options) && this.options.length;
             },
 
+            isLabelTooltipVisible() {
+                return this.withLabelTooltip && this.labelTooltip;
+            },
+
             isSliderInput() {
                 return this.type === COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SLIDER;
             },
@@ -519,6 +547,13 @@
 
             mainComponent() {
                 return COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE[this.type] || 'div';
+            },
+
+            tooltip() {
+                if (this.withComponentTooltip) {
+                    return this.componentTooltip || null;
+                }
+                return null;
             }
         }
     }));

frontend/express/public/javascripts/countly/vue/templates/content/UI/content-sidebar-input.html

@@ -17,12 +17,18 @@
       class="cly-vue-content-builder-sidebar-input__label"
     >
       {{ label }}
+      <i
+        v-if="isLabelTooltipVisible"
+        v-tooltip.left="labelTooltip"
+        :class="labelIcon"
+      />
     </label>
     <slot name="content-builder-layout-step">
       <component
         :is="mainComponent"
         v-bind="$attrs"
         v-model="componentValue"
+        v-tooltip.left="tooltip"
         class="cly-vue-content-builder-sidebar-input__component"
         :class="{ 'cly-vue-content-builder-sidebar-input__component--slider': isSliderInput }"
         :controls="controlsProp"

frontend/express/public/stylesheets/vue/clyvue.scss

@@ -4745,11 +4745,23 @@
 
     // .cly-vue-content-builder-sidebar-input__label
     &__label {
+        display: flex;
+        align-items: baseline;
+        justify-content: flex-start;
+
         flex-shrink: 0;
         margin-right: auto;
         font-size: 13px;
         font-weight: 500;
         line-height: 16px;
+
+        // .cly-vue-content-builder-sidebar-input__label i
+        i {
+            margin-left: 4px;
+            font-size: 13px;
+            font-weight: 500;
+            line-height: 16px;
+        }
     }
 
     // .cly-vue-content-builder-sidebar-input__number-input-suffix