Skip to content

Commit 6f8445b

Browse files
feat: add label tooltip
1 parent 40219a4 commit 6f8445b

File tree

3 files changed

+35
-0
lines changed

3 files changed

+35
-0
lines changed

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

+18
Original file line numberDiff line numberDiff line change
@@ -419,6 +419,15 @@
419419
type: String
420420
},
421421

422+
labelIcon: {
423+
default: 'cly-io cly-io-question-mark-circle',
424+
type: String
425+
},
426+
labelTooltip: {
427+
default: null,
428+
type: String
429+
},
430+
422431
options: {
423432
default: () => [],
424433
type: Array
@@ -457,6 +466,11 @@
457466
size: {
458467
default: null,
459468
type: String
469+
},
470+
471+
withLabelTooltip: {
472+
default: false,
473+
type: Boolean
460474
}
461475
},
462476

@@ -498,6 +512,10 @@
498512
return this.isDropdownInput && Array.isArray(this.options) && this.options.length;
499513
},
500514

515+
isLabelTooltipVisible() {
516+
return this.withLabelTooltip && this.labelTooltip;
517+
},
518+
501519
isSliderInput() {
502520
return this.type === COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SLIDER;
503521
},

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

+5
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,11 @@
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

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)