feat: add label tooltip

Author: gabrieloliveirapinto

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

@@ -419,6 +419,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 +466,11 @@
             size: {
                 default: null,
                 type: String
+            },
+
+            withLabelTooltip: {
+                default: false,
+                type: Boolean
             }
         },
 
@@ -498,6 +512,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;
             },

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

@@ -17,6 +17,11 @@
       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

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