Skip to content

Commit 5e25b4c

Browse files
authored
Merge pull request #5957 from Countly/feat-add-tooltips-to-content-sidebar-input-component
[Feat] Add tooltips to content sidebar input component
2 parents 40219a4 + e850ad0 commit 5e25b4c

File tree

3 files changed

+53
-0
lines changed

3 files changed

+53
-0
lines changed

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

+35
Original file line numberDiff line numberDiff line change
@@ -409,6 +409,11 @@
409409
template: CV.T('/javascripts/countly/vue/templates/content/UI/content-sidebar-input.html'),
410410

411411
props: {
412+
componentTooltip: {
413+
default: null,
414+
type: String
415+
},
416+
412417
disabled: {
413418
default: false,
414419
type: Boolean
@@ -419,6 +424,15 @@
419424
type: String
420425
},
421426

427+
labelIcon: {
428+
default: 'cly-io cly-io-question-mark-circle',
429+
type: String
430+
},
431+
labelTooltip: {
432+
default: null,
433+
type: String
434+
},
435+
422436
options: {
423437
default: () => [],
424438
type: Array
@@ -457,6 +471,16 @@
457471
size: {
458472
default: null,
459473
type: String
474+
},
475+
476+
withComponentTooltip: {
477+
default: false,
478+
type: Boolean
479+
},
480+
481+
withLabelTooltip: {
482+
default: false,
483+
type: Boolean
460484
}
461485
},
462486

@@ -498,6 +522,10 @@
498522
return this.isDropdownInput && Array.isArray(this.options) && this.options.length;
499523
},
500524

525+
isLabelTooltipVisible() {
526+
return this.withLabelTooltip && this.labelTooltip;
527+
},
528+
501529
isSliderInput() {
502530
return this.type === COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SLIDER;
503531
},
@@ -519,6 +547,13 @@
519547

520548
mainComponent() {
521549
return COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE[this.type] || 'div';
550+
},
551+
552+
tooltip() {
553+
if (this.withComponentTooltip) {
554+
return this.componentTooltip || null;
555+
}
556+
return null;
522557
}
523558
}
524559
}));

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

+6
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,18 @@
1717
class="cly-vue-content-builder-sidebar-input__label"
1818
>
1919
{{ label }}
20+
<i
21+
v-if="isLabelTooltipVisible"
22+
v-tooltip.left="labelTooltip"
23+
:class="labelIcon"
24+
/>
2025
</label>
2126
<slot name="content-builder-layout-step">
2227
<component
2328
:is="mainComponent"
2429
v-bind="$attrs"
2530
v-model="componentValue"
31+
v-tooltip.left="tooltip"
2632
class="cly-vue-content-builder-sidebar-input__component"
2733
:class="{ 'cly-vue-content-builder-sidebar-input__component--slider': isSliderInput }"
2834
:controls="controlsProp"

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

+12
Original file line numberDiff line numberDiff line change
@@ -4745,11 +4745,23 @@
47454745

47464746
// .cly-vue-content-builder-sidebar-input__label
47474747
&__label {
4748+
display: flex;
4749+
align-items: baseline;
4750+
justify-content: flex-start;
4751+
47484752
flex-shrink: 0;
47494753
margin-right: auto;
47504754
font-size: 13px;
47514755
font-weight: 500;
47524756
line-height: 16px;
4757+
4758+
// .cly-vue-content-builder-sidebar-input__label i
4759+
i {
4760+
margin-left: 4px;
4761+
font-size: 13px;
4762+
font-weight: 500;
4763+
line-height: 16px;
4764+
}
47534765
}
47544766

47554767
// .cly-vue-content-builder-sidebar-input__number-input-suffix

0 commit comments

Comments
 (0)