Merge pull request #5724 from Countly/tooltip-fixes

Replace repetitive spans with tooltip-icon component

Author: Cookiezaurs

frontend/express/public/core/device-and-type/templates/devices-tab.html

@@ -15,7 +15,7 @@
 				<div class="bu-p-3">
 					<div class="bu-level-left bu-p-3 bu-pb-4">
 						<span class="text-small text-uppercase bu-has-text-weight-medium" :data-test-id="item.title.replaceAll(' ', '-').toLowerCase() + '-label'">{{item.title}}</span>
-						<span class="cly-vue-tooltip-icon ion ion-help-circled has-tooltip bu-ml-2" v-tooltip.top-center="item.description" :data-test-id="item.title.replaceAll(' ', '-').toLowerCase() + '-tooltip'"></span>
+						<cly-tooltip-icon class="bu-ml-2" :tooltip="item.description" placement="top-center" :data-test-id="item.title.replaceAll(' ', '-').toLowerCase() + '-tooltip'"></cly-tooltip-icon>
 					</div>
 					<div class="topData">
 						<div v-if="!item.data.length">

frontend/express/public/core/device-and-type/templates/technologyHomeWidget.html

@@ -5,7 +5,7 @@
 				<cly-section :class="(idx === 0 || idx === 1)? 'bu-pb-2' : 'bu-pt-2 bu-pb-2'">
 						<div class="bu-level-left bu-p-5">
 							<span class="text-medium text-uppercase" :data-test-id="`cly-section-label-${item.title.toLowerCase().replaceAll(/\s/g, '-')}`">{{item.title}}</span>
-							<span class="cly-vue-tooltip-icon ion ion-help-circled has-tooltip" :data-test-id="`cly-section-${item.title.toLowerCase().replaceAll(/\s/g, '-')}-tooltip`" style="margin-left:10px" v-tooltip.top-center="item.description"></span>
+							<cly-tooltip-icon class="bu-ml-2" :tooltip="item.description" placement="top-center" :data-test-id="`cly-section-${item.title.toLowerCase().replaceAll(/\s/g, '-')}-tooltip`"></cly-tooltip-icon>
 						</div>
 						<div class="topData bu-pl-3 bu-pr-3 bu-pb-5" :data-test-id="`cly-section-${item.title.toLowerCase().replaceAll(/\s/g, '-')}-data-block`">
 							<div :key="idx2" v-for="(item2, idx2) in item.data" >

frontend/express/public/core/home/templates/sessionsWidget.html

@@ -7,7 +7,7 @@
 						<div class="bu-is-flex bu-is-flex-direction-column bu-is-justify-content-space-between">
 							<div>
 								<span class="text-medium">{{item.label}}</span>
-								<span v-if="item.description" class="cly-vue-tooltip-icon ion ion-help-circled bu-pl-2"  v-tooltip.top-center="item.description"></span>
+								<cly-tooltip-icon v-if="item.description" class="bu-pl-2" :tooltip="item.description" placement="top-center"></cly-tooltip-icon>
 							</div>
 						</div>
 						<div class="bu-is-flex bu-is-align-items-baseline number">

frontend/express/public/core/home/templates/widgetTitle.html

@@ -1,7 +1,7 @@
 <div class="bu-level bu-pb-3">
     <div class="bu-level-left" :data-test-id="`widget-label-${widget.label.toLowerCase().replaceAll(/\s/g, '-')}`">
         <h2>{{i18n(widget.label)}}</h2>
-        <span class="cly-vue-tooltip-icon ion ion-help-circled" :data-test-id="`widget-tooltip-${widget.label.toLowerCase().replaceAll(/\s/g, '-')}`" style="margin-left:10px" v-tooltip.top-center="widget.description"></span>
+        <cly-tooltip-icon :data-test-id="`widget-tooltip-${widget.label.toLowerCase().replaceAll(/\s/g, '-')}`" class="bu-ml-2" :tooltip="widget.description" placement="top-center"></cly-tooltip-icon>
     </div>
     <div class="bu-level-right">
         <a v-if="widget.linkTo" class="cly-back-link text-medium" :data-test-id="`widget-link-${widget.linkTo.label.toLowerCase().replaceAll(/\s/g, '-')}`" :href="widget.linkTo.href"><span>{{i18n(widget.linkTo.label)}}<i class="fas fa-arrow-right bu-pl-3" :data-test-id="`widget-arrow-${widget.linkTo.label.toLowerCase().replaceAll(/\s/g, '-')}`"></i></span></a>

frontend/express/public/core/session-overview/templates/sessionsHomeWidget.html

@@ -8,7 +8,7 @@
 						<div class="bu-is-flex bu-is-flex-direction-column bu-is-justify-content-space-between" :data-test-id="`tab-box-label-tooltip-container-${item.label.toLowerCase().replace('.', '').replaceAll(/\s/g, '-')}`">
 							<div class="text-medium" :data-test-id="`tab-box-label-tooltip-${item.label.toLowerCase().replace('.', '').replaceAll(/\s/g, '-')}`">
 								<span :data-test-id="`tab-box-label-${item.label.toLowerCase().replace('.', '').replaceAll(/\s/g, '-')}`">{{item.label}}</span>
-								<span v-if="item.description" class="cly-vue-tooltip-icon ion ion-help-circled bu-ml-1" :data-test-id="`tab-box-tooltip-${item.label.toLowerCase().replace('.', '').replaceAll(/\s/g, '-')}`" v-tooltip.top-center="item.description"></span>
+								<cly-tooltip-icon v-if="item.description" class="bu-ml-1" :tooltip="item.description" placement="top-center" :data-test-id="`tab-box-tooltip-${item.label.toLowerCase().replace('.', '').replaceAll(/\s/g, '-')}`"></cly-tooltip-icon>
 							</div>
 						</div>
 						<div class="bu-is-flex bu-is-align-items-center number" :data-test-id="`tab-box-center-${item.label.toLowerCase().replace('.', '').replaceAll(/\s/g, '-')}`">

frontend/express/public/javascripts/countly/vue/templates/breakdown.html

@@ -3,7 +3,7 @@
             <div class="bu-is-relative">
             <div class="bu-level-left bu-p-5" v-if="typeof name !== 'undefined'">
                 <span class="text-medium">{{name}}</span>
-                <span v-if="description" class="cly-vue-tooltip-icon ion ion-help-circled has-tooltip bu-ml-3" v-tooltip.top-center="description"></span>
+                <cly-tooltip-icon v-if="description" class="bu-ml-3" :tooltip="description" placement="top-center"></cly-tooltip-icon>
             </div>
             <div class="bu-level-left bu-p-2" v-if="typeof name === 'undefined'"></div>
             <div v-if="values.length === 0" class="bu-pl-3 bu-pr-3 cly-vue-metric-breakdown__empty" style="height: 264px;">

plugins/crashes/frontend/public/templates/tab-label.html

@@ -2,7 +2,7 @@
     <div class="bu-is-flex bu-is-flex-direction-column bu-is-justify-content-space-between">
         <div class="text-medium" :data-test-id="`cly-section-${title.toLowerCase().replaceAll(/\s/g, '-').replace('/', 'or')}-title`">
             <span>{{title}}</span>
-            <span v-if="tooltip" :data-test-id="`cly-section-${title.toLowerCase().replaceAll(/\s/g, '-').replace('/', 'or')}-tooltip`" class="cly-vue-tooltip-icon ion ion-help-circled bu-ml-1" v-tooltip.top-center="tooltip"></span>
+            <cly-tooltip-icon v-if="tooltip" class="bu-ml-1" :tooltip="tooltip" placement="top-center" :data-test-id="`cly-section-${title.toLowerCase().replaceAll(/\s/g, '-').replace('/', 'or')}-tooltip`"></cly-tooltip-icon>
         </div>
     </div>
     <div class="bu-is-flex bu-is-align-items-center">

plugins/server-stats/frontend/public/templates/data-points.html

@@ -36,13 +36,13 @@ <h4 data-test-id="top-applications-by-data-points-in-the-last-two-hours-label">{
 				<el-table-column min-width="150" :formatter="numberFormatter" sortable="custom" prop="sessions" :label="i18n('sidebar.analytics.sessions')">
 					<template v-slot:header>
 						{{i18n('sidebar.analytics.sessions')}}
-						<span class="cly-vue-tooltip-icon ion ion-help-circled bu-pl-1" v-tooltip.top-center="i18n('server-stats.sessions-description')"></span>
+						<cly-tooltip-icon class="bu-pl-1" :tooltip="i18n('server-stats.sessions-description')" placement="top-center"></cly-tooltip-icon>
 					</template>
 				</el-table-column>
 				<el-table-column min-width="150" :formatter="numberFormatter" sortable="custom" prop="events" :label="i18n('server-stats.events')">
 					<template v-slot:header>
 						{{i18n('server-stats.events')}}
-						<span class="cly-vue-tooltip-icon ion ion-help-circled bu-pl-1" v-tooltip.top-center="i18n('server-stats.events-description')"></span>
+						<cly-tooltip-icon class="bu-pl-1" :tooltip="i18n('server-stats.events-description')" placement="top-center"></cly-tooltip-icon>
 					</template>
 					<div slot-scope="scopeRow">
 						<el-popover