From 041948c04f8b20bebe74f34564c912d19c91bde0 Mon Sep 17 00:00:00 2001
From: Abhishek Kumar <abhishek.mrt22@gmail.com>
Date: Thu, 15 Jul 2021 12:45:38 +0530
Subject: [PATCH] ui: refactor labels with tooltip in forms (#5133)

* ui: refactor labels with tooltip in forms

Adds new Vue component TooltipLabel for easier re-use

Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com>

* changes

Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com>

* changes

Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com>

* changes

Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com>

* changes

Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com>

* changes

Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com>

* moved component in widgets

Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com>

* moved TooltipButton in widgets

Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com>

* missing change in previous commit

Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com>

* changes

Signed-off-by: Abhishek Kumar <abhishek.kumar@shapeblue.com>

* fix

Signed-off-by: Abhishek Kumar <abhishek.kumar@shapeblue.com>

* form improvements

Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com>

* tooltip icon class fix

Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com>

* fix

Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com>

* Update ui/src/views/storage/UploadLocalVolume.vue

Co-authored-by: Pearl Dsilva <pearl1594@gmail.com>

* Update ui/src/views/storage/CreateVolume.vue

Co-authored-by: davidjumani <dj.davidjumani1994@gmail.com>

* fix

Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com>

Co-authored-by: Pearl Dsilva <pearl1594@gmail.com>
Co-authored-by: davidjumani <dj.davidjumani1994@gmail.com>
---
 ui/src/components/view/DetailSettings.vue     |   2 +-
 ui/src/components/view/InfoCard.vue           |   2 +-
 ui/src/components/view/ListView.vue           |   2 +-
 ui/src/components/view/SearchView.vue         |   2 +-
 ui/src/components/view/SettingsTab.vue        |   2 +-
 .../{view => widgets}/TooltipButton.vue       |   0
 ui/src/components/widgets/TooltipLabel.vue    |  52 ++
 ui/src/views/AutogenView.vue                  |  11 +-
 .../views/compute/CreateKubernetesCluster.vue | 109 +--
 ui/src/views/compute/CreateSnapshotWizard.vue |  32 +-
 ui/src/views/compute/DeployVM.vue             |  36 +-
 ui/src/views/compute/DestroyVM.vue            |  18 +-
 ui/src/views/compute/EditVM.vue               |  46 +-
 ui/src/views/compute/InstanceTab.vue          |   2 +-
 ui/src/views/compute/MigrateVMStorage.vue     |  11 +-
 .../views/compute/ScaleKubernetesCluster.vue  |  18 +-
 ui/src/views/compute/StartVirtualMachine.vue  |  32 +-
 .../compute/UpgradeKubernetesCluster.vue      |  11 +-
 .../views/compute/backup/BackupSchedule.vue   |   2 +-
 ui/src/views/iam/AddAccount.vue               |  88 +-
 ui/src/views/iam/AddUser.vue                  |  74 +-
 ui/src/views/iam/ChangeUserPassword.vue       |  25 +-
 ui/src/views/iam/CreateRole.vue               |  53 +-
 ui/src/views/iam/DomainActionForm.vue         |  11 +-
 ui/src/views/iam/EditUser.vue                 |  39 +-
 ui/src/views/iam/ImportRole.vue               |  49 +-
 ui/src/views/iam/RolePermissionTab.vue        |   2 +-
 ui/src/views/iam/RuleDelete.vue               |   2 +-
 ui/src/views/iam/SSLCertificateTab.vue        |   2 +-
 .../image/AddKubernetesSupportedVersion.vue   |  54 +-
 ui/src/views/image/IsoZones.vue               |   2 +-
 ui/src/views/image/TemplateZones.vue          |   2 +-
 ui/src/views/infra/AddPrimaryStorage.vue      | 151 +---
 ui/src/views/infra/InfraSummary.vue           |  39 +-
 .../views/infra/network/DedicatedVLANTab.vue  |   2 +-
 .../views/infra/network/EditTrafficLabel.vue  |  46 +-
 .../infra/network/IpRangesTabManagement.vue   |   2 +-
 .../views/infra/network/IpRangesTabPublic.vue |   2 +-
 .../infra/network/IpRangesTabStorage.vue      |   2 +-
 .../network/providers/ProviderListView.vue    |   2 +-
 .../views/infra/routers/RouterHealthCheck.vue |  11 +-
 .../views/infra/zone/IpAddressRangeForm.vue   |   2 +-
 .../ZoneWizardPhysicalNetworkSetupStep.vue    |   2 +-
 ui/src/views/network/AclListRulesTab.vue      |   2 +-
 .../network/CreateIsolatedNetworkForm.vue     |  88 +-
 ui/src/views/network/CreateL2NetworkForm.vue  |  74 +-
 .../views/network/CreateSharedNetworkForm.vue | 285 ++-----
 ui/src/views/network/CreateVlanIpRange.vue    |  63 +-
 ui/src/views/network/CreateVpc.vue            |  54 +-
 .../network/CreateVpnCustomerGateway.vue      |  75 +-
 ui/src/views/network/EgressRulesTab.vue       |   2 +-
 ui/src/views/network/FirewallRules.vue        |   2 +-
 ui/src/views/network/GuestIpRanges.vue        |   2 +-
 .../network/IngressEgressRuleConfigure.vue    |   2 +-
 .../views/network/InternalLBAssignedVmTab.vue |   2 +-
 ui/src/views/network/IpAddressesTab.vue       |   2 +-
 ui/src/views/network/LoadBalancing.vue        |   2 +-
 ui/src/views/network/PortForwarding.vue       |   2 +-
 ui/src/views/network/StaticRoutesTab.vue      |   2 +-
 ui/src/views/network/VpcTiersTab.vue          |  11 +-
 ui/src/views/offering/AddComputeOffering.vue  | 805 +++++++-----------
 ui/src/views/offering/AddDiskOffering.vue     | 245 ++----
 ui/src/views/offering/AddNetworkOffering.vue  | 238 ++----
 ui/src/views/offering/AddVpcOffering.vue      |  78 +-
 .../views/offering/ImportBackupOffering.vue   |  39 +-
 ui/src/views/project/AccountsTab.vue          |   2 +-
 .../project/AddAccountOrUserToProject.vue     |  61 +-
 ui/src/views/project/InvitationsTemplate.vue  |   2 +-
 .../project/iam/ProjectRolePermissionTab.vue  |   2 +-
 ui/src/views/project/iam/ProjectRoleTab.vue   |   2 +-
 ui/src/views/storage/CreateVolume.vue         |  32 +-
 ui/src/views/storage/FormSchedule.vue         |   2 +-
 ui/src/views/storage/ScheduledSnapshots.vue   |   2 +-
 ui/src/views/storage/TakeSnapshot.vue         |   2 +-
 ui/src/views/storage/UploadLocalVolume.vue    |  32 +-
 75 files changed, 979 insertions(+), 2289 deletions(-)
 rename ui/src/components/{view => widgets}/TooltipButton.vue (100%)
 create mode 100644 ui/src/components/widgets/TooltipLabel.vue

diff --git a/ui/src/components/view/DetailSettings.vue b/ui/src/components/view/DetailSettings.vue
index 1af56bf321a..302fd63af78 100644
--- a/ui/src/components/view/DetailSettings.vue
+++ b/ui/src/components/view/DetailSettings.vue
@@ -110,7 +110,7 @@
 
 <script>
 import { api } from '@/api'
-import TooltipButton from './TooltipButton.vue'
+import TooltipButton from '@/components/widgets/TooltipButton'
 
 export default {
   components: { TooltipButton },
diff --git a/ui/src/components/view/InfoCard.vue b/ui/src/components/view/InfoCard.vue
index 62fe8872190..b2a8dd3328c 100644
--- a/ui/src/components/view/InfoCard.vue
+++ b/ui/src/components/view/InfoCard.vue
@@ -699,7 +699,7 @@ import { api } from '@/api'
 import Console from '@/components/widgets/Console'
 import OsLogo from '@/components/widgets/OsLogo'
 import Status from '@/components/widgets/Status'
-import TooltipButton from '@/components/view/TooltipButton'
+import TooltipButton from '@/components/widgets/TooltipButton'
 
 export default {
   name: 'InfoCard',
diff --git a/ui/src/components/view/ListView.vue b/ui/src/components/view/ListView.vue
index 06b9fe384e4..b17a1333ce0 100644
--- a/ui/src/components/view/ListView.vue
+++ b/ui/src/components/view/ListView.vue
@@ -326,7 +326,7 @@ import OsLogo from '@/components/widgets/OsLogo'
 import Status from '@/components/widgets/Status'
 import InfoCard from '@/components/view/InfoCard'
 import QuickView from '@/components/view/QuickView'
-import TooltipButton from '@/components/view/TooltipButton'
+import TooltipButton from '@/components/widgets/TooltipButton'
 
 export default {
   name: 'ListView',
diff --git a/ui/src/components/view/SearchView.vue b/ui/src/components/view/SearchView.vue
index cbc93446bd7..668783bb10f 100644
--- a/ui/src/components/view/SearchView.vue
+++ b/ui/src/components/view/SearchView.vue
@@ -112,7 +112,7 @@
 
 <script>
 import { api } from '@/api'
-import TooltipButton from '@/components/view/TooltipButton'
+import TooltipButton from '@/components/widgets/TooltipButton'
 
 export default {
   name: 'SearchView',
diff --git a/ui/src/components/view/SettingsTab.vue b/ui/src/components/view/SettingsTab.vue
index aa886f371c4..349d51691dd 100644
--- a/ui/src/components/view/SettingsTab.vue
+++ b/ui/src/components/view/SettingsTab.vue
@@ -72,7 +72,7 @@
 
 <script>
 import { api } from '@/api'
-import TooltipButton from './TooltipButton.vue'
+import TooltipButton from '@/components/widgets/TooltipButton'
 
 export default {
   components: {
diff --git a/ui/src/components/view/TooltipButton.vue b/ui/src/components/widgets/TooltipButton.vue
similarity index 100%
rename from ui/src/components/view/TooltipButton.vue
rename to ui/src/components/widgets/TooltipButton.vue
diff --git a/ui/src/components/widgets/TooltipLabel.vue b/ui/src/components/widgets/TooltipLabel.vue
new file mode 100644
index 00000000000..dddeb60bf90
--- /dev/null
+++ b/ui/src/components/widgets/TooltipLabel.vue
@@ -0,0 +1,52 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+<template>
+  <span>
+    {{ title }}
+    <a-tooltip v-if="tooltip" :title="tooltip" :placement="tooltipPlacement">
+      <a-icon type="info-circle" class="tooltip-icon" />
+    </a-tooltip>
+  </span>
+</template>
+
+<script>
+
+export default {
+  name: 'TooltipLabel',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    tooltip: {
+      type: String,
+      default: null
+    },
+    tooltipPlacement: {
+      type: String,
+      default: 'top'
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .tooltip-icon {
+    color: rgba(0,0,0,.45);
+  }
+</style>
diff --git a/ui/src/views/AutogenView.vue b/ui/src/views/AutogenView.vue
index ecd8547466e..69719410256 100644
--- a/ui/src/views/AutogenView.vue
+++ b/ui/src/views/AutogenView.vue
@@ -159,12 +159,7 @@
               :v-bind="field.name"
               v-if="!(currentAction.mapping && field.name in currentAction.mapping && currentAction.mapping[field.name].value)"
             >
-              <span slot="label">
-                {{ $t('label.' + field.name) }}
-                <a-tooltip :title="field.description">
-                  <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-                </a-tooltip>
-              </span>
+              <tooltip-label slot="label" :title="$t('label.' + field.name)" :tooltip="field.description"/>
 
               <span v-if="field.type==='boolean'">
                 <a-switch
@@ -352,6 +347,7 @@ import ListView from '@/components/view/ListView'
 import ResourceView from '@/components/view/ResourceView'
 import ActionButton from '@/components/view/ActionButton'
 import SearchView from '@/components/view/SearchView'
+import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'Resource',
@@ -362,7 +358,8 @@ export default {
     ListView,
     Status,
     ActionButton,
-    SearchView
+    SearchView,
+    TooltipLabel
   },
   mixins: [mixinDevice],
   provide: function () {
diff --git a/ui/src/views/compute/CreateKubernetesCluster.vue b/ui/src/views/compute/CreateKubernetesCluster.vue
index 9659b3da876..f877b82e94c 100644
--- a/ui/src/views/compute/CreateKubernetesCluster.vue
+++ b/ui/src/views/compute/CreateKubernetesCluster.vue
@@ -23,12 +23,7 @@
         @submit="handleSubmit"
         layout="vertical">
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.name') }}
-            <a-tooltip :title="apiParams.name.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.name')" :tooltip="apiParams.name.description"/>
           <a-input
             v-decorator="['name', {
               rules: [{ required: true, message: $t('message.error.kubecluster.name') }]
@@ -37,12 +32,7 @@
             autoFocus />
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.description') }}
-            <a-tooltip :title="apiParams.description.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.description')" :tooltip="apiParams.description.description"/>
           <a-input
             v-decorator="['description', {
               rules: [{ required: true, message: $t('message.error.cluster.description') }]
@@ -50,12 +40,7 @@
             :placeholder="apiParams.description.description"/>
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.zoneid') }}
-            <a-tooltip :title="apiParams.zoneid.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.zoneid')" :tooltip="apiParams.zoneid.description"/>
           <a-select
             id="zone-selection"
             v-decorator="['zoneid', {
@@ -75,12 +60,7 @@
           </a-select>
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.kubernetesversionid') }}
-            <a-tooltip :title="apiParams.kubernetesversionid.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.kubernetesversionid')" :tooltip="apiParams.kubernetesversionid.description"/>
           <a-select
             id="version-selection"
             v-decorator="['kubernetesversionid', {
@@ -100,12 +80,7 @@
           </a-select>
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.serviceofferingid') }}
-            <a-tooltip :title="apiParams.serviceofferingid.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.serviceofferingid')" :tooltip="apiParams.serviceofferingid.description"/>
           <a-select
             id="offering-selection"
             v-decorator="['serviceofferingid', {
@@ -124,12 +99,7 @@
           </a-select>
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.noderootdisksize') }}
-            <a-tooltip :title="apiParams.noderootdisksize.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.noderootdisksize')" :tooltip="apiParams.noderootdisksize.description"/>
           <a-input
             v-decorator="['noderootdisksize', {
               rules: [{
@@ -144,12 +114,7 @@
             :placeholder="apiParams.noderootdisksize.description"/>
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.networkid') }}
-            <a-tooltip :title="apiParams.networkid.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.networkid')" :tooltip="apiParams.networkid.description"/>
           <a-select
             id="network-selection"
             v-decorator="['networkid', {}]"
@@ -169,12 +134,7 @@
           <a-switch v-decorator="['haenable', {initialValue: this.haEnabled}]" :checked="this.haEnabled" @change="val => { this.haEnabled = val }" />
         </a-form-item>
         <a-form-item v-if="this.haEnabled">
-          <span slot="label">
-            {{ $t('label.controlnodes') }}
-            <a-tooltip :title="apiParams.controlnodes.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.controlnodes')" :tooltip="apiParams.controlnodes.description"/>
           <a-input
             v-decorator="['controlnodes', {
               initialValue: '2',
@@ -192,23 +152,13 @@
             :placeholder="apiParams.controlnodes.description"/>
         </a-form-item>
         <a-form-item v-if="this.haEnabled">
-          <span slot="label">
-            {{ $t('label.externalloadbalanceripaddress') }}
-            <a-tooltip :title="apiParams.externalloadbalanceripaddress.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.externalloadbalanceripaddress')" :tooltip="apiParams.externalloadbalanceripaddress.description"/>
           <a-input
             v-decorator="['externalloadbalanceripaddress', {}]"
             :placeholder="apiParams.externalloadbalanceripaddress.description"/>
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.cks.cluster.size') }}
-            <a-tooltip :title="apiParams.size.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.cks.cluster.size')" :tooltip="apiParams.size.description"/>
           <a-input
             v-decorator="['size', {
               initialValue: '1',
@@ -226,12 +176,7 @@
             :placeholder="apiParams.size.description"/>
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.keypair') }}
-            <a-tooltip :title="apiParams.keypair.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.keypair')" :tooltip="apiParams.keypair.description"/>
           <a-select
             id="keypair-selection"
             v-decorator="['keypair', {}]"
@@ -253,12 +198,7 @@
           </a-form-item>
           <div v-if="usePrivateRegistry">
             <a-form-item>
-              <span slot="label">
-                {{ $t('label.username') }}
-                <a-tooltip :title="apiParams.dockerregistryusername.description">
-                  <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-                </a-tooltip>
-              </span>
+              <tooltip-label slot="label" :title="$t('label.username')" :tooltip="apiParams.dockerregistryusername.description"/>
               <a-input
                 v-decorator="['dockerregistryusername', {
                   rules: [{ required: true, message: $t('label.required') }]
@@ -266,12 +206,7 @@
                 :placeholder="apiParams.dockerregistryusername.description"/>
             </a-form-item>
             <a-form-item>
-              <span slot="label">
-                {{ $t('label.password') }}
-                <a-tooltip :title="apiParams.dockerregistrypassword.description">
-                  <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-                </a-tooltip>
-              </span>
+              <tooltip-label slot="label" :title="$t('label.password')" :tooltip="apiParams.dockerregistrypassword.description"/>
               <a-input-password
                 v-decorator="['dockerregistrypassword', {
                   rules: [{ required: true, message: $t('label.required') }]
@@ -279,12 +214,7 @@
                 :placeholder="apiParams.dockerregistrypassword.description"/>
             </a-form-item>
             <a-form-item>
-              <span slot="label">
-                {{ $t('label.url') }}
-                <a-tooltip :title="apiParams.dockerregistryurl.description">
-                  <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-                </a-tooltip>
-              </span>
+              <tooltip-label slot="label" :title="$t('label.url')" :tooltip="apiParams.dockerregistryurl.description"/>
               <a-input
                 v-decorator="['dockerregistryurl', {
                   rules: [{ required: true, message: $t('label.required') }]
@@ -292,12 +222,7 @@
                 :placeholder="apiParams.dockerregistryurl.description"/>
             </a-form-item>
             <a-form-item>
-              <span slot="label">
-                {{ $t('label.email') }}
-                <a-tooltip :title="apiParams.dockerregistryemail.description">
-                  <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-                </a-tooltip>
-              </span>
+              <tooltip-label slot="label" :title="$t('label.email')" :tooltip="apiParams.dockerregistryemail.description"/>
               <a-input
                 v-decorator="['dockerregistryemail', {
                   rules: [{ required: true, message: $t('label.required') }]
@@ -317,9 +242,13 @@
 
 <script>
 import { api } from '@/api'
+import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'CreateKubernetesCluster',
+  components: {
+    TooltipLabel
+  },
   props: {},
   data () {
     return {
diff --git a/ui/src/views/compute/CreateSnapshotWizard.vue b/ui/src/views/compute/CreateSnapshotWizard.vue
index a1698bf06f2..e00d23052b1 100644
--- a/ui/src/views/compute/CreateSnapshotWizard.vue
+++ b/ui/src/views/compute/CreateSnapshotWizard.vue
@@ -23,12 +23,7 @@
         @submit="handleSubmit"
         layout="vertical">
         <a-form-item>
-          <span slot="label" :title="apiParams.volumeid.description">
-            {{ $t('label.volumeid') }}
-            <a-tooltip>
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.volumeid')" :tooltip="apiParams.volumeid.description"/>
           <a-select
             showSearch
             allowClear
@@ -46,32 +41,17 @@
           </a-select>
         </a-form-item>
         <a-form-item>
-          <span slot="label" :title="apiParams.name.description">
-            {{ $t('label.name') }}
-            <a-tooltip>
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.name')" :tooltip="apiParams.name.description"/>
           <a-input
             v-decorator="['name']"
             :placeholder="apiParams.name.description"/>
         </a-form-item>
         <a-form-item v-if="isQuiesceVm">
-          <span slot="label" :title="apiParams.quiescevm.description">
-            {{ $t('label.quiescevm') }}
-            <a-tooltip>
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.quiescevm')" :tooltip="apiParams.quiescevm.description"/>
           <a-switch v-decorator="['quiescevm', { initialValue: false }]"/>
         </a-form-item>
         <a-form-item v-if="!supportsStorageSnapshot">
-          <span slot="label" :title="apiParams.asyncbackup.description">
-            {{ $t('label.asyncbackup') }}
-            <a-tooltip>
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.asyncbackup')" :tooltip="apiParams.asyncbackup.description"/>
           <a-switch v-decorator="['asyncbackup', { initialValue: false }]"/>
         </a-form-item>
         <div :span="24" class="action-button">
@@ -85,9 +65,13 @@
 
 <script>
 import { api } from '@/api'
+import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'CreateSnapshotWizard',
+  components: {
+    TooltipLabel
+  },
   props: {
     resource: {
       type: Object,
diff --git a/ui/src/views/compute/DeployVM.vue b/ui/src/views/compute/DeployVM.vue
index bd1f17b3417..a38693d9bf1 100644
--- a/ui/src/views/compute/DeployVM.vue
+++ b/ui/src/views/compute/DeployVM.vue
@@ -162,12 +162,7 @@
                 <template slot="description">
                   <div v-if="zoneSelected">
                     <a-form-item v-if="zoneSelected && templateConfigurationExists">
-                      <span slot="label">
-                        {{ $t('label.configuration') }}
-                        <a-tooltip :title="$t('message.ovf.configurations')">
-                          <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-                        </a-tooltip>
-                      </span>
+                      <tooltip-label slot="label" :title="$t('label.configuration')" :tooltip="$t('message.ovf.configurations')"/>
                       <a-select
                         showSearch
                         optionFilterProp="children"
@@ -285,12 +280,7 @@
                         v-for="(nic, nicIndex) in templateNics"
                         :key="nicIndex"
                         :v-bind="nic.name" >
-                        <span slot="label">
-                          {{ nic.elementName + ' - ' + nic.name }}
-                          <a-tooltip :title="nic.networkDescription">
-                            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-                          </a-tooltip>
-                        </span>
+                        <tooltip-label slot="label" :title="nic.elementName + ' - ' + nic.name" :tooltip="nic.networkDescription"/>
                         <a-select
                           showSearch
                           optionFilterProp="children"
@@ -377,12 +367,7 @@
                         v-for="(property, propertyIndex) in props"
                         :key="propertyIndex"
                         :v-bind="property.key" >
-                        <span slot="label" style="text-transform: capitalize">
-                          {{ property.label }}
-                          <a-tooltip :title="property.description">
-                            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-                          </a-tooltip>
-                        </span>
+                        <tooltip-label slot="label" style="text-transform: capitalize" :title="property.label" :tooltip="property.description"/>
 
                         <span v-if="property.type && property.type==='boolean'">
                           <a-switch
@@ -510,12 +495,7 @@
                       </a-switch>
                     </a-form-item>
                     <a-form-item>
-                      <span slot="label">
-                        {{ $t('label.dynamicscalingenabled') }}
-                        <a-tooltip :title="$t('label.dynamicscalingenabled.tooltip')">
-                          <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-                        </a-tooltip>
-                      </span>
+                      <tooltip-label slot="label" :title="$t('label.dynamicscalingenabled')" :tooltip="$t('label.dynamicscalingenabled.tooltip')"/>
                       <a-form-item>
                         <a-switch
                           v-decorator="['dynamicscalingenabled']"
@@ -585,9 +565,7 @@
                         v-for="(license, licenseIndex) in templateLicenses"
                         :key="licenseIndex"
                         :v-bind="license.id">
-                        <span slot="label" style="text-transform: capitalize">
-                          {{ 'Agreement ' + (licenseIndex+1) + ': ' + license.name }}
-                        </span>
+                        <tooltip-label slot="label" style="text-transform: capitalize" :title="$t('label.agreement' + ' ' + (licenseIndex+1) + ': ' + license.name)"/>
                         <a-textarea
                           :value="license.text"
                           :auto-size="{ minRows: 3, maxRows: 8 }"
@@ -669,6 +647,7 @@ import NetworkSelection from '@views/compute/wizard/NetworkSelection'
 import NetworkConfiguration from '@views/compute/wizard/NetworkConfiguration'
 import SshKeyPairSelection from '@views/compute/wizard/SshKeyPairSelection'
 import SecurityGroupSelection from '@views/compute/wizard/SecurityGroupSelection'
+import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'Wizard',
@@ -684,7 +663,8 @@ export default {
     InfoCard,
     ComputeOfferingSelection,
     ComputeSelection,
-    SecurityGroupSelection
+    SecurityGroupSelection,
+    TooltipLabel
   },
   props: {
     visible: {
diff --git a/ui/src/views/compute/DestroyVM.vue b/ui/src/views/compute/DestroyVM.vue
index 46fb3c32e73..cd72fb3a77c 100644
--- a/ui/src/views/compute/DestroyVM.vue
+++ b/ui/src/views/compute/DestroyVM.vue
@@ -24,22 +24,12 @@
         @submit="handleSubmit"
         layout="vertical">
         <a-form-item v-if="$store.getters.userInfo.roletype === 'Admin' || $store.getters.features.allowuserexpungerecovervm">
-          <span slot="label">
-            {{ $t('label.expunge') }}
-            <a-tooltip placement="bottom" :title="apiParams.expunge.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.expunge')" :tooltip="apiParams.expunge.description"/>
           <a-switch v-decorator="['expunge']" :auto-focus="true" />
         </a-form-item>
 
         <a-form-item v-if="volumes.length > 0">
-          <span slot="label">
-            {{ $t('label.delete.volumes') }}
-            <a-tooltip placement="bottom" :title="apiParams.volumeids.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.delete.volumes')" :tooltip="apiParams.volumeids.description"/>
           <a-select
             v-decorator="['volumeids']"
             :placeholder="$t('label.delete.volumes')"
@@ -64,9 +54,13 @@
 
 <script>
 import { api } from '@/api'
+import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'DestroyVM',
+  components: {
+    TooltipLabel
+  },
   props: {
     resource: {
       type: Object,
diff --git a/ui/src/views/compute/EditVM.vue b/ui/src/views/compute/EditVM.vue
index 1aa654bfff5..a0b02c23bc1 100644
--- a/ui/src/views/compute/EditVM.vue
+++ b/ui/src/views/compute/EditVM.vue
@@ -23,33 +23,18 @@
       :form="form"
       @submit="handleSubmit">
       <a-form-item>
-        <span slot="label">
-          {{ $t('label.name') }}
-          <a-tooltip :title="apiParams.name.description">
-            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-          </a-tooltip>
-        </span>
+        <tooltip-label slot="label" :title="$t('label.name')" :tooltip="apiParams.name.description"/>
         <a-input
           v-decorator="['name', { initialValue: resource.name || '' }]"
           autoFocus />
       </a-form-item>
       <a-form-item>
-        <span slot="label">
-          {{ $t('label.displayname') }}
-          <a-tooltip :title="apiParams.displayname.description">
-            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-          </a-tooltip>
-        </span>
+        <tooltip-label slot="label" :title="$t('label.displayname')" :tooltip="apiParams.displayname.description"/>
         <a-input
           v-decorator="['displayname', { initialValue: resource.displayname || '' }]" />
       </a-form-item>
       <a-form-item>
-        <span slot="label">
-          {{ $t('label.ostypeid') }}
-          <a-tooltip :title="apiParams.ostypeid.description">
-            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-          </a-tooltip>
-        </span>
+        <tooltip-label slot="label" :title="$t('label.ostypeid')" :tooltip="apiParams.ostypeid.description"/>
         <a-select
           showSearch
           optionFilterProp="children"
@@ -64,35 +49,20 @@
         </a-select>
       </a-form-item>
       <a-form-item>
-        <span slot="label">
-          {{ $t('label.isdynamicallyscalable') }}
-          <a-tooltip :title="apiParams.isdynamicallyscalable.description">
-            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-          </a-tooltip>
-        </span>
+        <tooltip-label slot="label" :title="$t('label.isdynamicallyscalable')" :tooltip="apiParams.isdynamicallyscalable.description"/>
         <a-switch
           :default-checked="resource.isdynamicallyscalable"
           v-decorator="['isdynamicallyscalable']"
           :disabled="!canDynamicScalingEnabled()" />
       </a-form-item>
       <a-form-item>
-        <span slot="label">
-          {{ $t('label.haenable') }}
-          <a-tooltip :title="apiParams.haenable.description">
-            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-          </a-tooltip>
-        </span>
+        <tooltip-label slot="label" :title="$t('label.haenable')" :tooltip="apiParams.haenable.description"/>
         <a-switch
           :default-checked="resource.haenable"
           v-decorator="['haenable']" />
       </a-form-item>
       <a-form-item>
-        <span slot="label">
-          {{ $t('label.group') }}
-          <a-tooltip :title="apiParams.group.description">
-            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-          </a-tooltip>
-        </span>
+        <tooltip-label slot="label" :title="$t('label.group')" :tooltip="apiParams.group.description"/>
         <a-auto-complete
           v-decorator="['group', { initialValue: resource.group }]"
           :filterOption="(input, option) => {
@@ -111,9 +81,13 @@
 
 <script>
 import { api } from '@/api'
+import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'EditVM',
+  components: {
+    TooltipLabel
+  },
   props: {
     action: {
       type: Object,
diff --git a/ui/src/views/compute/InstanceTab.vue b/ui/src/views/compute/InstanceTab.vue
index 1a169d756c7..0cf96555a16 100644
--- a/ui/src/views/compute/InstanceTab.vue
+++ b/ui/src/views/compute/InstanceTab.vue
@@ -261,7 +261,7 @@ import DetailsTab from '@/components/view/DetailsTab'
 import DetailSettings from '@/components/view/DetailSettings'
 import NicsTable from '@/views/network/NicsTable'
 import ListResourceTable from '@/components/view/ListResourceTable'
-import TooltipButton from '@/components/view/TooltipButton'
+import TooltipButton from '@/components/widgets/TooltipButton'
 
 export default {
   name: 'InstanceTab',
diff --git a/ui/src/views/compute/MigrateVMStorage.vue b/ui/src/views/compute/MigrateVMStorage.vue
index 7744c571042..d52f8514070 100644
--- a/ui/src/views/compute/MigrateVMStorage.vue
+++ b/ui/src/views/compute/MigrateVMStorage.vue
@@ -23,12 +23,7 @@
         @submit="handleSubmit"
         layout="vertical">
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.storageid') }}
-            <a-tooltip :title="apiParams.storageid.description" v-if="!(apiParams.hostid && apiParams.hostid.required === false)">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.storageid')" :tooltip="apiParams.storageid ? apiParams.storageid.description : ''"/>
           <a-select
             :loading="loading"
             v-decorator="['storageid', {
@@ -51,9 +46,13 @@
 
 <script>
 import { api } from '@/api'
+import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'MigrateVMStorage',
+  components: {
+    TooltipLabel
+  },
   props: {
     resource: {
       type: Object,
diff --git a/ui/src/views/compute/ScaleKubernetesCluster.vue b/ui/src/views/compute/ScaleKubernetesCluster.vue
index 11dd4bf7f95..4537ab9f791 100644
--- a/ui/src/views/compute/ScaleKubernetesCluster.vue
+++ b/ui/src/views/compute/ScaleKubernetesCluster.vue
@@ -27,12 +27,7 @@
         @submit="handleSubmit"
         layout="vertical">
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.cks.cluster.size') }}
-            <a-tooltip :title="apiParams.size.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.cks.cluster.size')" :tooltip="apiParams.size.description"/>
           <a-input
             v-decorator="['size', {
               initialValue: originalSize,
@@ -49,12 +44,7 @@
             autoFocus />
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.serviceofferingid') }}
-            <a-tooltip :title="apiParams.serviceofferingid.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.serviceofferingid')" :tooltip="apiParams.serviceofferingid.description"/>
           <a-select
             id="offering-selection"
             v-decorator="['serviceofferingid', {}]"
@@ -82,9 +72,13 @@
 
 <script>
 import { api } from '@/api'
+import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'ScaleKubernetesCluster',
+  components: {
+    TooltipLabel
+  },
   props: {
     resource: {
       type: Object,
diff --git a/ui/src/views/compute/StartVirtualMachine.vue b/ui/src/views/compute/StartVirtualMachine.vue
index beb82c74807..98864205755 100644
--- a/ui/src/views/compute/StartVirtualMachine.vue
+++ b/ui/src/views/compute/StartVirtualMachine.vue
@@ -28,12 +28,7 @@
         layout="vertical">
         <div v-if="this.$store.getters.userInfo.roletype === 'Admin'">
           <a-form-item>
-            <span slot="label">
-              {{ $t('label.podid') }}
-              <a-tooltip :title="apiParams.podid.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.podid')" :tooltip="apiParams.podid.description"/>
             <a-select
               v-decorator="['podid', {}]"
               showSearch
@@ -51,12 +46,7 @@
             </a-select>
           </a-form-item>
           <a-form-item>
-            <span slot="label">
-              {{ $t('label.clusterid') }}
-              <a-tooltip :title="apiParams.clusterid.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.clusterid')" :tooltip="apiParams.clusterid.description"/>
             <a-select
               id="cluster-selection"
               v-decorator="['clusterid', {}]"
@@ -74,12 +64,7 @@
             </a-select>
           </a-form-item>
           <a-form-item>
-            <span slot="label">
-              {{ $t('label.hostid') }}
-              <a-tooltip :title="apiParams.hostid.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.hostid')" :tooltip="apiParams.hostid.description"/>
             <a-select
               id="host-selection"
               v-decorator="['hostid', {}]"
@@ -98,12 +83,7 @@
         </div>
 
         <a-form-item v-if="resource.hypervisor === 'VMware'">
-          <span slot="label">
-            {{ $t('label.bootintosetup') }}
-            <a-tooltip :title="apiParams.bootintosetup.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.bootintosetup')" :tooltip="apiParams.bootintosetup.description"/>
           <a-switch
             v-decorator="['bootintosetup']">
           </a-switch>
@@ -120,9 +100,13 @@
 
 <script>
 import { api } from '@/api'
+import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'StartVirtualMachine',
+  components: {
+    TooltipLabel
+  },
   props: {
     resource: {
       type: Object,
diff --git a/ui/src/views/compute/UpgradeKubernetesCluster.vue b/ui/src/views/compute/UpgradeKubernetesCluster.vue
index e681b2f228d..a00f717eb4a 100644
--- a/ui/src/views/compute/UpgradeKubernetesCluster.vue
+++ b/ui/src/views/compute/UpgradeKubernetesCluster.vue
@@ -27,12 +27,7 @@
         @submit="handleSubmit"
         layout="vertical">
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.kubernetesversionid') }}
-            <a-tooltip :title="apiParams.kubernetesversionid.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.kubernetesversionid')" :tooltip="apiParams.kubernetesversionid.description"/>
           <a-select
             id="version-selection"
             v-decorator="['kubernetesversionid', {
@@ -63,9 +58,13 @@
 
 <script>
 import { api } from '@/api'
+import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'UpgradeKubernetesCluster',
+  components: {
+    TooltipLabel
+  },
   props: {
     resource: {
       type: Object,
diff --git a/ui/src/views/compute/backup/BackupSchedule.vue b/ui/src/views/compute/backup/BackupSchedule.vue
index 0c31e86c26c..66b7dc7d44e 100644
--- a/ui/src/views/compute/backup/BackupSchedule.vue
+++ b/ui/src/views/compute/backup/BackupSchedule.vue
@@ -74,7 +74,7 @@
 <script>
 import { api } from '@/api'
 import { timeZoneName } from '@/utils/timezone'
-import TooltipButton from '@/components/view/TooltipButton'
+import TooltipButton from '@/components/widgets/TooltipButton'
 
 export default {
   name: 'BackupSchedule',
diff --git a/ui/src/views/iam/AddAccount.vue b/ui/src/views/iam/AddAccount.vue
index bb0359b2372..618a32ba4ee 100644
--- a/ui/src/views/iam/AddAccount.vue
+++ b/ui/src/views/iam/AddAccount.vue
@@ -20,12 +20,7 @@
     <a-spin :spinning="loading">
       <a-form :form="form" :loading="loading" @submit="handleSubmit" layout="vertical">
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.role') }}
-            <a-tooltip :title="apiParams.roleid.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.role')" :tooltip="apiParams.roleid.description"/>
           <a-select
             v-decorator="['roleid', {
               initialValue: selectedRole,
@@ -39,12 +34,7 @@
           </a-select>
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.username') }}
-            <a-tooltip :title="apiParams.username.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.username')" :tooltip="apiParams.username.description"/>
           <a-input
             v-decorator="['username', {
               rules: [{ required: true, message: $t('message.error.required.input') }]
@@ -54,12 +44,7 @@
         <a-row :gutter="12">
           <a-col :md="24" :lg="12">
             <a-form-item>
-              <span slot="label">
-                {{ $t('label.password') }}
-                <a-tooltip :title="apiParams.password.description">
-                  <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-                </a-tooltip>
-              </span>
+              <tooltip-label slot="label" :title="$t('label.password')" :tooltip="apiParams.password.description"/>
               <a-input-password
                 v-decorator="['password', {
                   rules: [{ required: true, message: $t('message.error.required.input') }]
@@ -69,12 +54,7 @@
           </a-col>
           <a-col :md="24" :lg="12">
             <a-form-item>
-              <span slot="label">
-                {{ $t('label.confirmpassword') }}
-                <a-tooltip :title="apiParams.password.description">
-                  <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-                </a-tooltip>
-              </span>
+              <tooltip-label slot="label" :title="$t('label.confirmpassword')" :tooltip="apiParams.password.description"/>
               <a-input-password
                 v-decorator="['confirmpassword', {
                   rules: [
@@ -87,12 +67,7 @@
           </a-col>
         </a-row>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.email') }}
-            <a-tooltip :title="apiParams.email.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.email')" :tooltip="apiParams.email.description"/>
           <a-input
             v-decorator="['email', {
               rules: [{ required: true, message: $t('message.error.required.input') }]
@@ -102,12 +77,7 @@
         <a-row :gutter="12">
           <a-col :md="24" :lg="12">
             <a-form-item>
-              <span slot="label">
-                {{ $t('label.firstname') }}
-                <a-tooltip :title="apiParams.firstname.description">
-                  <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-                </a-tooltip>
-              </span>
+              <tooltip-label slot="label" :title="$t('label.firstname')" :tooltip="apiParams.firstname.description"/>
               <a-input
                 v-decorator="['firstname', {
                   rules: [{ required: true, message: $t('message.error.required.input') }]
@@ -117,12 +87,7 @@
           </a-col>
           <a-col :md="24" :lg="12">
             <a-form-item>
-              <span slot="label">
-                {{ $t('label.lastname') }}
-                <a-tooltip :title="apiParams.lastname.description">
-                  <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-                </a-tooltip>
-              </span>
+              <tooltip-label slot="label" :title="$t('label.lastname')" :tooltip="apiParams.lastname.description"/>
               <a-input
                 v-decorator="['lastname', {
                   rules: [{ required: true, message: $t('message.error.required.input') }]
@@ -132,12 +97,7 @@
           </a-col>
         </a-row>
         <a-form-item v-if="this.isAdminOrDomainAdmin()">
-          <span slot="label">
-            {{ $t('label.domain') }}
-            <a-tooltip :title="apiParams.domainid.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.domainid')" :tooltip="apiParams.domainid.description"/>
           <a-select
             :loading="domainLoading"
             v-decorator="['domainid', {
@@ -150,21 +110,11 @@
           </a-select>
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.account') }}
-            <a-tooltip :title="apiParams.account.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.account')" :tooltip="apiParams.account.description"/>
           <a-input v-decorator="['account']" :placeholder="apiParams.account.description" />
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.timezone') }}
-            <a-tooltip :title="apiParams.timezone.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.timezone')" :tooltip="apiParams.timezone.description"/>
           <a-select
             showSearch
             v-decorator="['timezone']"
@@ -176,12 +126,7 @@
           </a-select>
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.networkdomain') }}
-            <a-tooltip :title="apiParams.networkdomain.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.networkdomain')" :tooltip="apiParams.networkdomain.description"/>
           <a-input
             v-decorator="['networkdomain']"
             :placeholder="apiParams.networkdomain.description" />
@@ -191,12 +136,7 @@
             <a-switch v-decorator="['samlenable']" @change="checked => { this.samlEnable = checked }" />
           </a-form-item>
           <a-form-item v-if="samlEnable">
-            <span slot="label">
-              {{ $t('label.samlentity') }}
-              <a-tooltip :title="apiParams.entityid.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.samlentity')" :tooltip="apiParams.entityid.description"/>
             <a-select
               v-decorator="['samlentity', {
                 initialValue: selectedIdp,
@@ -220,9 +160,13 @@
 import { api } from '@/api'
 import { timeZone } from '@/utils/timezone'
 import debounce from 'lodash/debounce'
+import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'AddAccountForm',
+  components: {
+    TooltipLabel
+  },
   data () {
     this.fetchTimeZone = debounce(this.fetchTimeZone, 800)
     return {
diff --git a/ui/src/views/iam/AddUser.vue b/ui/src/views/iam/AddUser.vue
index efec6657f54..1eb053c80c2 100644
--- a/ui/src/views/iam/AddUser.vue
+++ b/ui/src/views/iam/AddUser.vue
@@ -20,12 +20,7 @@
     <a-spin :spinning="loading">
       <a-form :form="form" :loading="loading" @submit="handleSubmit" layout="vertical">
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.username') }}
-            <a-tooltip :title="apiParams.username.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.username')" :tooltip="apiParams.username.description"/>
           <a-input
             v-decorator="['username', {
               rules: [{ required: true, message: $t('message.error.required.input') }]
@@ -36,12 +31,7 @@
         <a-row :gutter="12">
           <a-col :md="24" :lg="12">
             <a-form-item>
-              <span slot="label">
-                {{ $t('label.password') }}
-                <a-tooltip :title="apiParams.password.description">
-                  <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-                </a-tooltip>
-              </span>
+              <tooltip-label slot="label" :title="$t('label.password')" :tooltip="apiParams.password.description"/>
               <a-input-password
                 v-decorator="['password', {
                   rules: [{ required: true, message: $t('message.error.required.input') }]
@@ -51,12 +41,7 @@
           </a-col>
           <a-col :md="24" :lg="12">
             <a-form-item>
-              <span slot="label">
-                {{ $t('label.confirmpassword') }}
-                <a-tooltip :title="apiParams.password.description">
-                  <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-                </a-tooltip>
-              </span>
+              <tooltip-label slot="label" :title="$t('label.confirmpassword')" :tooltip="apiParams.password.description"/>
               <a-input-password
                 v-decorator="['confirmpassword', {
                   rules: [
@@ -69,12 +54,7 @@
           </a-col>
         </a-row>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.email') }}
-            <a-tooltip :title="apiParams.email.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.email')" :tooltip="apiParams.email.description"/>
           <a-input
             v-decorator="['email', {
               rules: [{ required: true, message: $t('message.error.required.input') }]
@@ -84,12 +64,7 @@
         <a-row :gutter="12">
           <a-col :md="24" :lg="12">
             <a-form-item>
-              <span slot="label">
-                {{ $t('label.firstname') }}
-                <a-tooltip :title="apiParams.firstname.description">
-                  <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-                </a-tooltip>
-              </span>
+              <tooltip-label slot="label" :title="$t('label.firstname')" :tooltip="apiParams.firstname.description"/>
               <a-input
                 v-decorator="['firstname', {
                   rules: [{ required: true, message: $t('message.error.required.input') }]
@@ -99,12 +74,7 @@
           </a-col>
           <a-col :md="24" :lg="12">
             <a-form-item>
-              <span slot="label">
-                {{ $t('label.lastname') }}
-                <a-tooltip :title="apiParams.lastname.description">
-                  <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-                </a-tooltip>
-              </span>
+              <tooltip-label slot="label" :title="$t('label.lastname')" :tooltip="apiParams.lastname.description"/>
               <a-input
                 v-decorator="['lastname', {
                   rules: [{ required: true, message: $t('message.error.required.input') }]
@@ -114,12 +84,7 @@
           </a-col>
         </a-row>
         <a-form-item v-if="this.isAdminOrDomainAdmin() && !domainid">
-          <span slot="label">
-            {{ $t('label.domain') }}
-            <a-tooltip :title="apiParams.domainid.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.domainid')" :tooltip="apiParams.domainid.description"/>
           <a-select
             :loading="domainLoading"
             v-decorator="['domainid']"
@@ -130,12 +95,7 @@
           </a-select>
         </a-form-item>
         <a-form-item v-if="!account">
-          <span slot="label">
-            {{ $t('label.account') }}
-            <a-tooltip :title="apiParams.account.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.account')" :tooltip="apiParams.account.description"/>
           <a-select
             v-decorator="['account', {
               rules: [{ required: true, message: $t('message.error.required.input') }]
@@ -148,12 +108,7 @@
           </a-select>
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.timezone') }}
-            <a-tooltip :title="apiParams.timezone.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.timezone')" :tooltip="apiParams.timezone.description"/>
           <a-select
             showSearch
             v-decorator="['timezone']"
@@ -168,12 +123,7 @@
             <a-switch v-decorator="['samlenable']" @change="checked => { this.samlEnable = checked }" />
           </a-form-item>
           <a-form-item v-if="samlEnable">
-            <span slot="label">
-              {{ $t('label.samlentity') }}
-              <a-tooltip :title="apiParams.entityid.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.samlentity')" :tooltip="apiParams.entityid.description"/>
             <a-select
               v-decorator="['samlentity', {
                 initialValue: selectedIdp,
@@ -198,9 +148,13 @@
 import { api } from '@/api'
 import { timeZone } from '@/utils/timezone'
 import debounce from 'lodash/debounce'
+import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'AddUser',
+  components: {
+    TooltipLabel
+  },
   data () {
     this.fetchTimeZone = debounce(this.fetchTimeZone, 800)
     return {
diff --git a/ui/src/views/iam/ChangeUserPassword.vue b/ui/src/views/iam/ChangeUserPassword.vue
index 27fc269bf38..31dcfd4ab36 100644
--- a/ui/src/views/iam/ChangeUserPassword.vue
+++ b/ui/src/views/iam/ChangeUserPassword.vue
@@ -23,12 +23,7 @@
         @submit="handleSubmit"
         layout="vertical">
         <a-form-item v-if="!this.isAdminOrDomainAdmin()">
-          <span slot="label">
-            {{ $t('label.currentpassword') }}
-            <a-tooltip :title="apiParams.currentpassword.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.currentpassword')" :tooltip="apiParams.currentpassword.description"/>
           <a-input-password
             v-decorator="['currentpassword', {
               rules: [{ required: true, message: $t('message.error.current.password') }]
@@ -37,12 +32,7 @@
             autoFocus />
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.new.password') }}
-            <a-tooltip :title="apiParams.password.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.new.password')" :tooltip="apiParams.password.description"/>
           <a-input-password
             v-decorator="['password', {
               rules: [{ required: true, message: $t('message.error.new.password') }]
@@ -50,12 +40,7 @@
             :placeholder="$t('label.new.password')"/>
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.confirmpassword') }}
-            <a-tooltip :title="apiParams.password.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.confirmpassword')" :tooltip="apiParams.password.description"/>
           <a-input-password
             v-decorator="['confirmpassword', {
               rules: [
@@ -82,9 +67,13 @@
 
 <script>
 import { api } from '@/api'
+import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'ChangeUserPassword',
+  components: {
+    TooltipLabel
+  },
   props: {
     resource: {
       type: Object,
diff --git a/ui/src/views/iam/CreateRole.vue b/ui/src/views/iam/CreateRole.vue
index 7531f74b054..efae394b266 100644
--- a/ui/src/views/iam/CreateRole.vue
+++ b/ui/src/views/iam/CreateRole.vue
@@ -23,39 +23,24 @@
         @submit="handleSubmit"
         layout="vertical">
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.name') }}
-            <a-tooltip :title="createRoleApiParams.name.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.name')" :tooltip="apiParams.name.description"/>
           <a-input
             v-decorator="['name', {
               rules: [{ required: true, message: $t('message.error.required.input') }]
             }]"
-            :placeholder="createRoleApiParams.name.description"
+            :placeholder="apiParams.name.description"
             autoFocus />
         </a-form-item>
 
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.description') }}
-            <a-tooltip :title="createRoleApiParams.description.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.description')" :tooltip="apiParams.description.description"/>
           <a-input
             v-decorator="['description']"
-            :placeholder="createRoleApiParams.description.description" />
+            :placeholder="apiParams.description.description" />
         </a-form-item>
 
-        <a-form-item v-if="'roleid' in createRoleApiParams">
-          <span slot="label">
-            {{ $t('label.based.on') }}
-            <a-tooltip :title="$t('label.based.on.role.id.or.type')">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+        <a-form-item v-if="'roleid' in apiParams">
+          <tooltip-label slot="label" :title="$t('label.based.on')" :tooltip="$t('label.based.on.role.id.or.type')"/>
           <a-radio-group
             v-decorator="['using', {
               initialValue: this.createRoleUsing
@@ -72,17 +57,12 @@
         </a-form-item>
 
         <a-form-item v-if="this.createRoleUsing === 'type'">
-          <span slot="label">
-            {{ $t('label.type') }}
-            <a-tooltip :title="createRoleApiParams.type.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.type')" :tooltip="apiParams.type.description"/>
           <a-select
             v-decorator="['type', {
               rules: [{ required: true, message: $t('message.error.select') }]
             }]"
-            :placeholder="createRoleApiParams.type.description">
+            :placeholder="apiParams.type.description">
             <a-select-option v-for="role in defaultRoles" :key="role">
               {{ role }}
             </a-select-option>
@@ -90,17 +70,12 @@
         </a-form-item>
 
         <a-form-item v-if="this.createRoleUsing === 'role'">
-          <span slot="label">
-            {{ $t('label.role') }}
-            <a-tooltip :title="createRoleApiParams.roleid.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.role')" :tooltip="apiParams.roleid.description"/>
           <a-select
             v-decorator="['roleid', {
               rules: [{ required: true, message: $t('message.error.select') }]
             }]"
-            :placeholder="createRoleApiParams.roleid.description">
+            :placeholder="apiParams.roleid.description">
             <a-select-option
               v-for="role in roles"
               :value="role.id"
@@ -121,9 +96,13 @@
 
 <script>
 import { api } from '@/api'
+import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'CreateRole',
+  components: {
+    TooltipLabel
+  },
   data () {
     return {
       roles: [],
@@ -138,9 +117,9 @@ export default {
   beforeCreate () {
     this.form = this.$form.createForm(this)
     this.apiConfig = this.$store.getters.apis.createRole || {}
-    this.createRoleApiParams = {}
+    this.apiParams = {}
     this.apiConfig.params.forEach(param => {
-      this.createRoleApiParams[param.name] = param
+      this.apiParams[param.name] = param
     })
   },
   watch: {
diff --git a/ui/src/views/iam/DomainActionForm.vue b/ui/src/views/iam/DomainActionForm.vue
index b5152a61d6b..ef96762a855 100644
--- a/ui/src/views/iam/DomainActionForm.vue
+++ b/ui/src/views/iam/DomainActionForm.vue
@@ -46,12 +46,7 @@
             :v-bind="field.name"
             v-if="!(action.mapping && field.name in action.mapping && action.mapping[field.name].value)"
           >
-            <span slot="label">
-              {{ $t('label.' + field.name) }}
-              <a-tooltip :title="field.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.' + field.name)" :tooltip="field.description"/>
 
             <span v-if="field.type==='boolean'">
               <a-switch
@@ -136,9 +131,13 @@
 
 <script>
 import { api } from '@/api'
+import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'DomainActionForm',
+  components: {
+    TooltipLabel
+  },
   props: {
     action: {
       type: Object,
diff --git a/ui/src/views/iam/EditUser.vue b/ui/src/views/iam/EditUser.vue
index e9662b1cb4a..53dbe8f1714 100644
--- a/ui/src/views/iam/EditUser.vue
+++ b/ui/src/views/iam/EditUser.vue
@@ -20,12 +20,7 @@
     <a-spin :spinning="loading">
       <a-form :form="form" :loading="loading" @submit="handleSubmit" layout="vertical">
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.username') }}
-            <a-tooltip :title="apiParams.username.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.username')" :tooltip="apiParams.username.description"/>
           <a-input
             v-decorator="['username', {
               rules: [{ required: true, message: $t('message.error.required.input') }]
@@ -34,12 +29,7 @@
             autoFocus />
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.email') }}
-            <a-tooltip :title="apiParams.email.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.email')" :tooltip="apiParams.email.description"/>
           <a-input
             v-decorator="['email', {
               rules: [{ required: true, message: $t('message.error.required.input') }]
@@ -49,12 +39,7 @@
         <a-row :gutter="12">
           <a-col :md="24" :lg="12">
             <a-form-item>
-              <span slot="label">
-                {{ $t('label.firstname') }}
-                <a-tooltip :title="apiParams.firstname.description">
-                  <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-                </a-tooltip>
-              </span>
+              <tooltip-label slot="label" :title="$t('label.firstname')" :tooltip="apiParams.firstname.description"/>
               <a-input
                 v-decorator="['firstname', {
                   rules: [{ required: true, message: $t('message.error.required.input') }]
@@ -64,12 +49,7 @@
           </a-col>
           <a-col :md="24" :lg="12">
             <a-form-item>
-              <span slot="label">
-                {{ $t('label.lastname') }}
-                <a-tooltip :title="apiParams.lastname.description">
-                  <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-                </a-tooltip>
-              </span>
+              <tooltip-label slot="label" :title="$t('label.lastname')" :tooltip="apiParams.lastname.description"/>
               <a-input
                 v-decorator="['lastname', {
                   rules: [{ required: true, message: $t('message.error.required.input') }]
@@ -79,12 +59,7 @@
           </a-col>
         </a-row>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.timezone') }}
-            <a-tooltip :title="apiParams.timezone.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.timezone')" :tooltip="apiParams.timezone.description"/>
           <a-select
             showSearch
             v-decorator="['timezone']"
@@ -107,9 +82,13 @@
 import { api } from '@/api'
 import { timeZone } from '@/utils/timezone'
 import debounce from 'lodash/debounce'
+import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'EditUser',
+  components: {
+    TooltipLabel
+  },
   props: {
     resource: {
       type: Object,
diff --git a/ui/src/views/iam/ImportRole.vue b/ui/src/views/iam/ImportRole.vue
index 278f8dae863..7bdaf01d42e 100644
--- a/ui/src/views/iam/ImportRole.vue
+++ b/ui/src/views/iam/ImportRole.vue
@@ -23,12 +23,7 @@
         @submit="handleSubmit"
         layout="vertical">
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.rules.file') }}
-            <a-tooltip :title="$t('label.rules.file.to.import')">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.rules.file')" :tooltip="$t('label.rules.file.to.import')"/>
           <a-upload-dragger
             :multiple="false"
             :fileList="fileList"
@@ -52,44 +47,29 @@
           </a-upload-dragger>
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.name') }}
-            <a-tooltip :title="importRoleApiParams.name.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.name')" :tooltip="apiParams.name.description"/>
           <a-input
             v-decorator="['name', {
               rules: [{ required: true, message: $t('message.error.required.input') }]
             }]"
-            :placeholder="importRoleApiParams.name.description"
+            :placeholder="apiParams.name.description"
             autoFocus />
         </a-form-item>
 
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.description') }}
-            <a-tooltip :title="importRoleApiParams.description.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.description')" :tooltip="apiParams.description.description"/>
           <a-input
             v-decorator="['description']"
-            :placeholder="importRoleApiParams.description.description" />
+            :placeholder="apiParams.description.description" />
         </a-form-item>
 
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.type') }}
-            <a-tooltip :title="importRoleApiParams.type.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.type')" :tooltip="apiParams.type.description"/>
           <a-select
             v-decorator="['type', {
               rules: [{ required: true, message: $t('message.error.select') }]
             }]"
-            :placeholder="importRoleApiParams.type.description">
+            :placeholder="apiParams.type.description">
             <a-select-option v-for="role in defaultRoles" :key="role">
               {{ role }}
             </a-select-option>
@@ -97,12 +77,7 @@
         </a-form-item>
 
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.forced') }}
-            <a-tooltip :title="importRoleApiParams.forced.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.forced')" :tooltip="apiParams.forced.description"/>
           <a-switch
             v-decorator="['forced', {
               initialValue: false
@@ -120,9 +95,13 @@
 
 <script>
 import { api } from '@/api'
+import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'ImportRole',
+  components: {
+    TooltipLabel
+  },
   data () {
     return {
       fileList: [],
@@ -134,9 +113,9 @@ export default {
   beforeCreate () {
     this.form = this.$form.createForm(this)
     this.apiConfig = this.$store.getters.apis.importRole || {}
-    this.importRoleApiParams = {}
+    this.apiParams = {}
     this.apiConfig.params.forEach(param => {
-      this.importRoleApiParams[param.name] = param
+      this.apiParams[param.name] = param
     })
   },
   methods: {
diff --git a/ui/src/views/iam/RolePermissionTab.vue b/ui/src/views/iam/RolePermissionTab.vue
index 8b6a89d6599..ce2e393c2f9 100644
--- a/ui/src/views/iam/RolePermissionTab.vue
+++ b/ui/src/views/iam/RolePermissionTab.vue
@@ -110,7 +110,7 @@ import { api } from '@/api'
 import draggable from 'vuedraggable'
 import PermissionEditable from './PermissionEditable'
 import RuleDelete from './RuleDelete'
-import TooltipButton from '@/components/view/TooltipButton'
+import TooltipButton from '@/components/widgets/TooltipButton'
 
 export default {
   name: 'RolePermissionTab',
diff --git a/ui/src/views/iam/RuleDelete.vue b/ui/src/views/iam/RuleDelete.vue
index 958fe95791e..e6f7d75fa19 100644
--- a/ui/src/views/iam/RuleDelete.vue
+++ b/ui/src/views/iam/RuleDelete.vue
@@ -25,7 +25,7 @@
 </template>
 
 <script>
-import TooltipButton from '@/components/view/TooltipButton'
+import TooltipButton from '@/components/widgets/TooltipButton'
 
 export default {
   name: 'RuleDelete',
diff --git a/ui/src/views/iam/SSLCertificateTab.vue b/ui/src/views/iam/SSLCertificateTab.vue
index ee853e7f200..89575732d2f 100644
--- a/ui/src/views/iam/SSLCertificateTab.vue
+++ b/ui/src/views/iam/SSLCertificateTab.vue
@@ -68,7 +68,7 @@
 
 <script>
 import { api } from '@/api'
-import TooltipButton from '@/components/view/TooltipButton'
+import TooltipButton from '@/components/widgets/TooltipButton'
 
 export default {
   name: 'SSLCertificate',
diff --git a/ui/src/views/image/AddKubernetesSupportedVersion.vue b/ui/src/views/image/AddKubernetesSupportedVersion.vue
index 863be6328de..989e28317fe 100644
--- a/ui/src/views/image/AddKubernetesSupportedVersion.vue
+++ b/ui/src/views/image/AddKubernetesSupportedVersion.vue
@@ -23,12 +23,7 @@
         @submit="handleSubmit"
         layout="vertical">
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.semanticversion') }}
-            <a-tooltip :title="apiParams.semanticversion.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.semanticversion')" :tooltip="apiParams.semanticversion.description"/>
           <a-input
             v-decorator="['semanticversion', {
               rules: [{ required: true, message: $t('message.error.kuberversion') }]
@@ -37,12 +32,7 @@
             autoFocus />
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.name') }}
-            <a-tooltip :title="apiParams.name.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.name')" :tooltip="apiParams.name.description"/>
           <a-input
             v-decorator="['name', {
               rules: [{ message: $t('message.error.name') }]
@@ -50,12 +40,7 @@
             :placeholder="$t('label.name')"/>
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.zoneid') }}
-            <a-tooltip :title="apiParams.zoneid.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.zoneid')" :tooltip="apiParams.zoneid.description"/>
           <a-select
             id="zone-selection"
             v-decorator="['zoneid', {
@@ -83,12 +68,7 @@
           </a-select>
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.url') }}
-            <a-tooltip :title="apiParams.url.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.url')" :tooltip="apiParams.url.description"/>
           <a-input
             v-decorator="['url', {
               rules: [{ required: true, message: $t('message.error.binaries.iso.url') }]
@@ -96,12 +76,7 @@
             :placeholder="apiParams.url.description" />
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.checksum') }}
-            <a-tooltip :title="apiParams.checksum.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.checksum')" :tooltip="apiParams.checksum.description"/>
           <a-input
             v-decorator="['checksum', {
               rules: [{ required: false, message: $t('message.error.required.input') }]
@@ -109,12 +84,7 @@
             :placeholder="apiParams.checksum.description" />
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.mincpunumber') }}
-            <a-tooltip :title="apiParams.mincpunumber.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.mincpunumber')" :tooltip="apiParams.mincpunumber.description"/>
           <a-input
             v-decorator="['mincpunumber', {
               rules: [{ required: true, message: $t('message.please.enter.value') },
@@ -131,12 +101,7 @@
             :placeholder="apiParams.mincpunumber.description"/>
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.minmemory') }}
-            <a-tooltip :title="apiParams.minmemory.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.minmemory')" :tooltip="apiParams.minmemory.description"/>
           <a-input
             v-decorator="['minmemory', {
               rules: [{ required: true, message: $t('message.please.enter.value') },
@@ -164,10 +129,13 @@
 
 <script>
 import { api } from '@/api'
+import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'AddKubernetesSupportedVersion',
-  props: {},
+  components: {
+    TooltipLabel
+  },
   data () {
     return {
       zones: [],
diff --git a/ui/src/views/image/IsoZones.vue b/ui/src/views/image/IsoZones.vue
index 2e987014358..4e9438b8c8e 100644
--- a/ui/src/views/image/IsoZones.vue
+++ b/ui/src/views/image/IsoZones.vue
@@ -123,7 +123,7 @@
 
 <script>
 import { api } from '@/api'
-import TooltipButton from '@/components/view/TooltipButton'
+import TooltipButton from '@/components/widgets/TooltipButton'
 
 export default {
   name: 'IsoZones',
diff --git a/ui/src/views/image/TemplateZones.vue b/ui/src/views/image/TemplateZones.vue
index 20551202c03..474f03b52d0 100644
--- a/ui/src/views/image/TemplateZones.vue
+++ b/ui/src/views/image/TemplateZones.vue
@@ -132,7 +132,7 @@
 
 <script>
 import { api } from '@/api'
-import TooltipButton from '@/components/view/TooltipButton'
+import TooltipButton from '@/components/widgets/TooltipButton'
 
 export default {
   name: 'TemplateZones',
diff --git a/ui/src/views/infra/AddPrimaryStorage.vue b/ui/src/views/infra/AddPrimaryStorage.vue
index 8703ddbfd2a..b725538db00 100644
--- a/ui/src/views/infra/AddPrimaryStorage.vue
+++ b/ui/src/views/infra/AddPrimaryStorage.vue
@@ -20,12 +20,7 @@
     <a-spin :spinning="loading">
       <a-form :form="form" layout="vertical">
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.scope') }}
-            <a-tooltip :title="apiParams.scope.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.scope')" :tooltip="apiParams.scope.description"/>
           <a-select
             v-decorator="['scope', { initialValue: 'cluster' }]"
             @change="val => { this.scope = val }"
@@ -36,12 +31,7 @@
         </a-form-item>
         <div v-if="this.scope === 'zone'">
           <a-form-item>
-            <span slot="label">
-              {{ $t('label.hypervisor') }}
-              <a-tooltip :title="apiParams.hypervisor.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.hypervisor')" :tooltip="apiParams.hypervisor.description"/>
             <a-select
               v-decorator="['hypervisor', { initialValue: hypervisors[0]}]"
               @change="val => this.selectedHypervisor = val">
@@ -52,12 +42,7 @@
           </a-form-item>
         </div>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.zoneid') }}
-            <a-tooltip :title="apiParams.zoneid.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.zoneid')" :tooltip="apiParams.zoneid.description"/>
           <a-select
             v-decorator="['zone', { initialValue: this.zoneSelected, rules: [{ required: true, message: `${$t('label.required')}`}] }]"
             @change="val => changeZone(val)">
@@ -68,12 +53,7 @@
         </a-form-item>
         <div v-if="this.scope === 'cluster' || this.scope === 'host'">
           <a-form-item>
-            <span slot="label">
-              {{ $t('label.podid') }}
-              <a-tooltip :title="apiParams.podid.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.podid')" :tooltip="apiParams.podid.description"/>
             <a-select
               v-decorator="['pod', { initialValue: this.podSelected, rules: [{ required: true, message: `${$t('label.required')}`}] }]"
               @change="val => changePod(val)">
@@ -83,12 +63,7 @@
             </a-select>
           </a-form-item>
           <a-form-item>
-            <span slot="label">
-              {{ $t('label.clusterid') }}
-              <a-tooltip :title="apiParams.clusterid.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.clusterid')" :tooltip="apiParams.clusterid.description"/>
             <a-select
               v-decorator="['cluster', { initialValue: this.clusterSelected, rules: [{ required: true, message: `${$t('label.required')}`}] }]"
               @change="val => fetchHypervisor(val)">
@@ -110,21 +85,11 @@
           </a-form-item>
         </div>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.name') }}
-            <a-tooltip :title="apiParams.name.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.name')" :tooltip="apiParams.name.description"/>
           <a-input v-decorator="['name', { rules: [{ required: true, message: `${$t('label.required')}` }] }]"/>
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.protocol') }}
-            <a-tooltip :title="$t('message.protocol.description')">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.protocol')" :tooltip="$t('message.protocol.description')"/>
           <a-select
             v-decorator="['protocol', { initialValue: this.protocols[0], rules: [{ required: true, message: `${$t('label.required')}`}] }]"
             @change="val => this.protocolSelected = val">
@@ -137,23 +102,13 @@
           v-if="protocolSelected === 'nfs' || protocolSelected === 'SMB' || protocolSelected === 'iscsi' || protocolSelected === 'vmfs'|| protocolSelected === 'Gluster' ||
             (protocolSelected === 'PreSetup' && hypervisorType === 'VMware') || protocolSelected === 'datastorecluster'">
           <a-form-item>
-            <span slot="label">
-              {{ $t('label.server') }}
-              <a-tooltip :title="$t('message.server.description')">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.server')" :tooltip="$t('message.server.description')"/>
             <a-input v-decorator="['server', { rules: [{ required: true, message: `${$t('label.required')}` }] }]" />
           </a-form-item>
         </div>
         <div v-if="protocolSelected === 'nfs' || protocolSelected === 'SMB' || protocolSelected === 'ocfs2' || (protocolSelected === 'PreSetup' && hypervisorType !== 'VMware') || protocolSelected === 'SharedMountPoint'">
           <a-form-item>
-            <span slot="label">
-              {{ $t('label.path') }}
-              <a-tooltip :title="$t('message.path.description')">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.path')" :tooltip="$t('message.path.description')"/>
             <a-input v-decorator="['path', { rules: [{ required: true, message: `${$t('label.required')}` }] }]" />
           </a-form-item>
         </div>
@@ -178,31 +133,16 @@
         </div>
         <div v-if="protocolSelected === 'vmfs' || (protocolSelected === 'PreSetup' && hypervisorType === 'VMware') || protocolSelected === 'datastorecluster'">
           <a-form-item>
-            <span slot="label">
-              {{ $t('label.vcenterdatacenter') }}
-              <a-tooltip :title="$t('message.datacenter.description')">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.vcenterdatacenter')" :tooltip="$t('message.datacenter.description')"/>
             <a-input v-decorator="['vCenterDataCenter', { rules: [{ required: true, message: `${$t('label.required')}` }] }]"/>
           </a-form-item>
           <a-form-item>
-            <span slot="label">
-              {{ $t('label.vcenterdatastore') }}
-              <a-tooltip :title="$t('message.datastore.description')">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.vcenterdatastore')" :tooltip="$t('message.datastore.description')"/>
             <a-input v-decorator="['vCenterDataStore', { rules: [{ required: true, message: `${$t('label.required')}` }] }]"/>
           </a-form-item>
         </div>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.providername') }}
-            <a-tooltip :title="apiParams.provider.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.providername')" :tooltip="apiParams.provider.description"/>
           <a-select
             v-decorator="['provider', { initialValue: providerSelected, rules: [{ required: true, message: `${$t('label.required')}`}] }]"
             @change="updateProviderAndProtocol">
@@ -213,79 +153,39 @@
         </a-form-item>
         <div v-if="this.providerSelected !== 'DefaultPrimary' && this.providerSelected !== 'PowerFlex'">
           <a-form-item>
-            <span slot="label">
-              {{ $t('label.ismanaged') }}
-              <a-tooltip :title="apiParams.managed.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.ismanaged')" :tooltip="apiParams.managed.description"/>
             <a-checkbox-group v-decorator="['managed']" >
               <a-checkbox value="ismanaged"></a-checkbox>
             </a-checkbox-group>
           </a-form-item>
           <a-form-item>
-            <span slot="label">
-              {{ $t('label.capacitybytes') }}
-              <a-tooltip :title="apiParams.capacitybytes.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.capacitybytes')" :tooltip="apiParams.capacitybytes.description"/>
             <a-input v-decorator="['capacityBytes']" />
           </a-form-item>
           <a-form-item>
-            <span slot="label">
-              {{ $t('label.capacityiops') }}
-              <a-tooltip :title="apiParams.capacityiops.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.capacityiops')" :tooltip="apiParams.capacityiops.description"/>
             <a-input v-decorator="['capacityIops']" />
           </a-form-item>
           <a-form-item>
-            <span slot="label">
-              {{ $t('label.url') }}
-              <a-tooltip :title="apiParams.url.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.url')" :tooltip="apiParams.url.description"/>
             <a-input v-decorator="['url']" />
           </a-form-item>
         </div>
         <div v-if="this.providerSelected === 'PowerFlex'">
           <a-form-item>
-            <span slot="label">
-              {{ $t('label.powerflex.gateway') }}
-              <a-tooltip :title="$t('label.powerflex.gateway')">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.powerflex.gateway')" :tooltip="$t('label.powerflex.gateway')"/>
             <a-input v-decorator="['powerflexGateway', { rules: [{ required: true, message: `${$t('label.required')}` }] }]"/>
           </a-form-item>
           <a-form-item>
-            <span slot="label">
-              {{ $t('label.powerflex.gateway.username') }}
-              <a-tooltip :title="$t('label.powerflex.gateway.username')">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.powerflex.gateway.username')" :tooltip="$t('label.powerflex.gateway.username')"/>
             <a-input v-decorator="['powerflexGatewayUsername', { rules: [{ required: true, message: `${$t('label.required')}` }] }]"/>
           </a-form-item>
           <a-form-item>
-            <span slot="label">
-              {{ $t('label.powerflex.gateway.password') }}
-              <a-tooltip :title="$t('label.powerflex.gateway.password')">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.powerflex.gateway.password')" :tooltip="$t('label.powerflex.gateway.password')"/>
             <a-input-password v-decorator="['powerflexGatewayPassword', { rules: [{ required: true, message: `${$t('label.required')}` }] }]"/>
           </a-form-item>
           <a-form-item>
-            <span slot="label">
-              {{ $t('label.powerflex.storage.pool') }}
-              <a-tooltip :title="$t('label.powerflex.storage.pool')">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.powerflex.storage.pool')" :tooltip="$t('label.powerflex.storage.pool')"/>
             <a-input v-decorator="['powerflexStoragePool', { rules: [{ required: true, message: `${$t('label.required')}` }] }]"/>
           </a-form-item>
         </div>
@@ -313,12 +213,7 @@
           </a-form-item>
         </div>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.storagetags') }}
-            <a-tooltip :title="apiParams.tags.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.storagetags')" :tooltip="apiParams.tags.description"/>
           <a-select
             mode="tags"
             v-model="selectedTags"
@@ -338,9 +233,13 @@
 <script>
 import { api } from '@/api'
 import _ from 'lodash'
+import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'AddPrimaryStorage',
+  components: {
+    TooltipLabel
+  },
   props: {
     resource: {
       type: Object,
diff --git a/ui/src/views/infra/InfraSummary.vue b/ui/src/views/infra/InfraSummary.vue
index 46707a40021..908384c5c08 100644
--- a/ui/src/views/infra/InfraSummary.vue
+++ b/ui/src/views/infra/InfraSummary.vue
@@ -51,12 +51,7 @@
 
             <a-form @submit.prevent="handleSslFormSubmit" ref="sslForm" :form="form">
               <a-form-item :required="true">
-                <span slot="label">
-                  {{ $t('label.root.certificate') }}
-                  <a-tooltip placement="bottom" :title="apiParams.name.description">
-                    <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-                  </a-tooltip>
-                </span>
+                <tooltip-label slot="label" :title="$t('label.root.certificate')" :tooltip="apiParams.name.description" tooltipPlacement="bottom"/>
                 <a-textarea
                   id="rootCert"
                   rows="2"
@@ -75,12 +70,7 @@
                   v-for="(item, index) in intermediateCertificates"
                   :key="`key-${index}`"
                   class="intermediate-certificate">
-                  <span slot="label">
-                    {{ $t('label.intermediate.certificate') + ` ${index + 1} ` }}
-                    <a-tooltip placement="bottom" :title="apiParams.id.description">
-                      <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-                    </a-tooltip>
-                  </span>
+                  <tooltip-label slot="label" :title="$t('label.intermediate.certificate') + ` ${index + 1} `" :tooltip="apiParams.id.description" tooltipPlacement="bottom"/>
                   <a-textarea
                     :id="`intermediateCert${index}`"
                     rows="2"
@@ -102,12 +92,7 @@
               </a-form-item>
 
               <a-form-item :required="true">
-                <span slot="label">
-                  {{ $t('label.server.certificate') }}
-                  <a-tooltip placement="bottom" :title="apiParams.certificate.description">
-                    <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-                  </a-tooltip>
-                </span>
+                <tooltip-label slot="label" :title="$t('label.server.certificate')" :tooltip="apiParams.certificate.description" tooltipPlacement="bottom"/>
                 <a-textarea
                   id="serverCert"
                   rows="2"
@@ -121,12 +106,7 @@
               </a-form-item>
 
               <a-form-item :required="true">
-                <span slot="label">
-                  {{ $t('label.pkcs.private.certificate') }}
-                  <a-tooltip placement="bottom" :title="apiParams.privatekey.description">
-                    <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-                  </a-tooltip>
-                </span>
+                <tooltip-label slot="label" :title="$t('label.pkcs.private.certificate')" :tooltip="apiParams.privatekey.description" tooltipPlacement="bottom"/>
                 <a-textarea
                   id="pkcsKey"
                   rows="2"
@@ -140,12 +120,7 @@
               </a-form-item>
 
               <a-form-item :required="true">
-                <span slot="label">
-                  {{ $t('label.domain.suffix') }}
-                  <a-tooltip placement="bottom" :title="apiParams.domainsuffix.description">
-                    <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-                  </a-tooltip>
-                </span>
+                <tooltip-label slot="label" :title="$t('label.domain.suffix')" :tooltip="apiParams.domainsuffix.description" tooltipPlacement="bottom"/>
                 <a-input
                   id="dnsSuffix"
                   :placeholder="$t('label.domain.suffix')"
@@ -194,12 +169,14 @@ import router from '@/router'
 
 import Breadcrumb from '@/components/widgets/Breadcrumb'
 import ChartCard from '@/components/widgets/ChartCard'
+import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'InfraSummary',
   components: {
     Breadcrumb,
-    ChartCard
+    ChartCard,
+    TooltipLabel
   },
   data () {
     return {
diff --git a/ui/src/views/infra/network/DedicatedVLANTab.vue b/ui/src/views/infra/network/DedicatedVLANTab.vue
index 2fd76002b5e..93d18bb5761 100644
--- a/ui/src/views/infra/network/DedicatedVLANTab.vue
+++ b/ui/src/views/infra/network/DedicatedVLANTab.vue
@@ -134,7 +134,7 @@
 
 <script>
 import { api } from '@/api'
-import TooltipButton from '@/components/view/TooltipButton'
+import TooltipButton from '@/components/widgets/TooltipButton'
 
 export default {
   name: 'DedicatedVLANTab',
diff --git a/ui/src/views/infra/network/EditTrafficLabel.vue b/ui/src/views/infra/network/EditTrafficLabel.vue
index 559e85756f5..311079d59ba 100644
--- a/ui/src/views/infra/network/EditTrafficLabel.vue
+++ b/ui/src/views/infra/network/EditTrafficLabel.vue
@@ -20,12 +20,7 @@
     <a-spin :spinning="loading">
       <a-form :form="form" :loading="loading" @submit="handleSubmit" layout="vertical">
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.traffictype') }}
-            <a-tooltip :title="apiParams.id.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.traffictype')" :tooltip="apiParams.id.description"/>
           <a-select
             autoFocus
             v-decorator="['id', {
@@ -40,12 +35,7 @@
           </a-select>
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.kvmnetworklabel') }}
-            <a-tooltip :title="apiParams.kvmnetworklabel.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.kvmnetworklabel')" :tooltip="apiParams.kvmnetworklabel.description"/>
           <a-input
             v-decorator="['kvmnetworklabel', {
               initialValue: trafficResource.kvmnetworklabel
@@ -53,12 +43,7 @@
             :placeholder="$t('label.network.label.display.for.blank.value')" />
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.vmwarenetworklabel') }}
-            <a-tooltip :title="apiParams.vmwarenetworklabel.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.vmwarenetworklabel')" :tooltip="apiParams.vmwarenetworklabel.description"/>
           <a-input
             v-decorator="['vmwarenetworklabel', {
               initialValue: trafficResource.vmwarenetworklabel
@@ -66,12 +51,7 @@
             :placeholder="$t('label.network.label.display.for.blank.value')" />
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.xennetworklabel') }}
-            <a-tooltip :title="apiParams.xennetworklabel.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.xennetworklabel')" :tooltip="apiParams.xennetworklabel.description"/>
           <a-input
             v-decorator="['xennetworklabel', {
               initialValue: trafficResource.xennetworklabel
@@ -79,12 +59,7 @@
             :placeholder="$t('label.network.label.display.for.blank.value')" />
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.hypervnetworklabel') }}
-            <a-tooltip :title="apiParams.hypervnetworklabel.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.hypervnetworklabel')" :tooltip="apiParams.hypervnetworklabel.description"/>
           <a-input
             v-decorator="['hypervnetworklabel', {
               initialValue: trafficResource.hypervnetworklabel
@@ -92,12 +67,7 @@
             :placeholder="$t('label.network.label.display.for.blank.value')" />
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.ovm3networklabel') }}
-            <a-tooltip :title="apiParams.ovm3networklabel.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.ovm3networklabel')" :tooltip="apiParams.ovm3networklabel.description"/>
           <a-input
             v-decorator="['ovm3networklabel', {
               initialValue: trafficResource.ovm3networklabel
@@ -115,9 +85,13 @@
 
 <script>
 import { api } from '@/api'
+import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'EditTrafficLabel',
+  components: {
+    TooltipLabel
+  },
   props: {
     resource: {
       type: Object,
diff --git a/ui/src/views/infra/network/IpRangesTabManagement.vue b/ui/src/views/infra/network/IpRangesTabManagement.vue
index 8865ddae138..d27f5e5430d 100644
--- a/ui/src/views/infra/network/IpRangesTabManagement.vue
+++ b/ui/src/views/infra/network/IpRangesTabManagement.vue
@@ -123,7 +123,7 @@
 
 <script>
 import { api } from '@/api'
-import TooltipButton from '@/components/view/TooltipButton'
+import TooltipButton from '@/components/widgets/TooltipButton'
 
 export default {
   name: 'IpRangesTabManagement',
diff --git a/ui/src/views/infra/network/IpRangesTabPublic.vue b/ui/src/views/infra/network/IpRangesTabPublic.vue
index 9564ea1683f..5b58eb4554b 100644
--- a/ui/src/views/infra/network/IpRangesTabPublic.vue
+++ b/ui/src/views/infra/network/IpRangesTabPublic.vue
@@ -205,7 +205,7 @@
 
 <script>
 import { api } from '@/api'
-import TooltipButton from '@/components/view/TooltipButton'
+import TooltipButton from '@/components/widgets/TooltipButton'
 
 export default {
   name: 'IpRangesTabPublic',
diff --git a/ui/src/views/infra/network/IpRangesTabStorage.vue b/ui/src/views/infra/network/IpRangesTabStorage.vue
index fdb27f1f36c..d868a5aa5c3 100644
--- a/ui/src/views/infra/network/IpRangesTabStorage.vue
+++ b/ui/src/views/infra/network/IpRangesTabStorage.vue
@@ -117,7 +117,7 @@
 
 <script>
 import { api } from '@/api'
-import TooltipButton from '@/components/view/TooltipButton'
+import TooltipButton from '@/components/widgets/TooltipButton'
 
 export default {
   name: 'IpRangesTabStorage',
diff --git a/ui/src/views/infra/network/providers/ProviderListView.vue b/ui/src/views/infra/network/providers/ProviderListView.vue
index 0458877c54f..4b1e260fe66 100644
--- a/ui/src/views/infra/network/providers/ProviderListView.vue
+++ b/ui/src/views/infra/network/providers/ProviderListView.vue
@@ -116,7 +116,7 @@
 <script>
 import { api } from '@/api'
 import Status from '@/components/widgets/Status'
-import TooltipButton from '@/components/view/TooltipButton'
+import TooltipButton from '@/components/widgets/TooltipButton'
 
 export default {
   name: 'ProviderListView',
diff --git a/ui/src/views/infra/routers/RouterHealthCheck.vue b/ui/src/views/infra/routers/RouterHealthCheck.vue
index 86ff8e4d1af..a30644d3a63 100644
--- a/ui/src/views/infra/routers/RouterHealthCheck.vue
+++ b/ui/src/views/infra/routers/RouterHealthCheck.vue
@@ -55,12 +55,7 @@
             @submit="handleGetHealthChecksSubmit"
             layout="vertical">
             <a-form-item>
-              <span slot="label">
-                {{ $t('label.perform.fresh.checks') }}
-                <a-tooltip :title="apiParams.performfreshchecks.description">
-                  <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-                </a-tooltip>
-              </span>
+              <tooltip-label slot="label" :title="$t('label.perform.fresh.checks')" :tooltip="apiParams.performfreshchecks.description"/>
               <a-switch
                 v-decorator="[$t('performfreshchecks')]"
                 :placeholder="apiParams.performfreshchecks.description"
@@ -76,11 +71,13 @@
 <script>
 import { api } from '@/api'
 import Status from '@/components/widgets/Status'
+import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'RouterHealthCheck',
   components: {
-    Status
+    Status,
+    TooltipLabel
   },
   props: {
     resource: {
diff --git a/ui/src/views/infra/zone/IpAddressRangeForm.vue b/ui/src/views/infra/zone/IpAddressRangeForm.vue
index cbb5463573d..2d48ab2bb1c 100644
--- a/ui/src/views/infra/zone/IpAddressRangeForm.vue
+++ b/ui/src/views/infra/zone/IpAddressRangeForm.vue
@@ -142,7 +142,7 @@
 </template>
 <script>
 
-import TooltipButton from '@/components/view/TooltipButton'
+import TooltipButton from '@/components/widgets/TooltipButton'
 import { mixinDevice } from '@/utils/mixin.js'
 
 export default {
diff --git a/ui/src/views/infra/zone/ZoneWizardPhysicalNetworkSetupStep.vue b/ui/src/views/infra/zone/ZoneWizardPhysicalNetworkSetupStep.vue
index 9ec2afcb1b8..a5a39d59116 100644
--- a/ui/src/views/infra/zone/ZoneWizardPhysicalNetworkSetupStep.vue
+++ b/ui/src/views/infra/zone/ZoneWizardPhysicalNetworkSetupStep.vue
@@ -166,7 +166,7 @@
 </template>
 <script>
 
-import TooltipButton from '@/components/view/TooltipButton'
+import TooltipButton from '@/components/widgets/TooltipButton'
 
 export default {
   components: {
diff --git a/ui/src/views/network/AclListRulesTab.vue b/ui/src/views/network/AclListRulesTab.vue
index 7cc952030c9..544237d055a 100644
--- a/ui/src/views/network/AclListRulesTab.vue
+++ b/ui/src/views/network/AclListRulesTab.vue
@@ -198,7 +198,7 @@
 <script>
 import { api } from '@/api'
 import draggable from 'vuedraggable'
-import TooltipButton from '@/components/view/TooltipButton'
+import TooltipButton from '@/components/widgets/TooltipButton'
 
 export default {
   name: 'AclListRulesTab',
diff --git a/ui/src/views/network/CreateIsolatedNetworkForm.vue b/ui/src/views/network/CreateIsolatedNetworkForm.vue
index 135e6bc3ff1..c52080ee13d 100644
--- a/ui/src/views/network/CreateIsolatedNetworkForm.vue
+++ b/ui/src/views/network/CreateIsolatedNetworkForm.vue
@@ -24,12 +24,7 @@
           layout="vertical"
           @submit="handleSubmit">
           <a-form-item>
-            <span slot="label">
-              {{ $t('label.name') }}
-              <a-tooltip :title="apiParams.name.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.name')" :tooltip="apiParams.name.description"/>
             <a-input
               v-decorator="['name', {
                 rules: [{ required: true, message: $t('message.error.name') }]
@@ -38,12 +33,7 @@
               autoFocus/>
           </a-form-item>
           <a-form-item>
-            <span slot="label">
-              {{ $t('label.displaytext') }}
-              <a-tooltip :title="apiParams.displaytext.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.displaytext')" :tooltip="apiParams.displaytext.description"/>
             <a-input
               v-decorator="['displaytext', {
                 rules: [{ required: true, message: $t('message.error.display.text') }]
@@ -51,12 +41,7 @@
               :placeholder="this.$t('label.display.text')"/>
           </a-form-item>
           <a-form-item>
-            <span slot="label">
-              {{ $t('label.zoneid') }}
-              <a-tooltip :title="apiParams.zoneid.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.zoneid')" :tooltip="apiParams.zoneid.description"/>
             <a-select
               v-decorator="['zoneid', {
                 rules: [
@@ -80,12 +65,7 @@
             </a-select>
           </a-form-item>
           <a-form-item v-if="this.isAdminOrDomainAdmin()">
-            <span slot="label">
-              {{ $t('label.domain') }}
-              <a-tooltip :title="apiParams.domainid.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.domainid')" :tooltip="apiParams.domainid.description"/>
             <a-select
               v-decorator="['domainid', {}]"
               showSearch
@@ -102,12 +82,7 @@
             </a-select>
           </a-form-item>
           <a-form-item>
-            <span slot="label">
-              {{ $t('label.networkofferingid') }}
-              <a-tooltip :title="apiParams.networkofferingid.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.networkofferingid')" :tooltip="apiParams.networkofferingid.description"/>
             <a-select
               v-decorator="['networkofferingid', {
                 rules: [
@@ -131,12 +106,7 @@
             </a-select>
           </a-form-item>
           <a-form-item v-if="!this.isObjectEmpty(this.selectedNetworkOffering) && this.selectedNetworkOffering.specifyvlan">
-            <span slot="label">
-              {{ $t('label.vlan') }}
-              <a-tooltip :title="apiParams.vlan.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.vlan')" :tooltip="apiParams.vlan.description"/>
             <a-input
               v-decorator="['vlanid', {
                 rules: [{ required: true, message: $t('message.please.enter.value') }]
@@ -144,12 +114,7 @@
               :placeholder="this.$t('label.vlanid')"/>
           </a-form-item>
           <a-form-item v-if="!this.isObjectEmpty(this.selectedNetworkOffering) && this.selectedNetworkOffering.forvpc">
-            <span slot="label">
-              {{ $t('label.vpcid') }}
-              <a-tooltip :title="apiParams.vpcid.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.vpcid')" :tooltip="apiParams.vpcid.description"/>
             <a-select
               v-decorator="['vpcid', {
                 rules: [
@@ -173,56 +138,31 @@
             </a-select>
           </a-form-item>
           <a-form-item>
-            <span slot="label">
-              {{ $t('label.externalid') }}
-              <a-tooltip :title="apiParams.externalid.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.externalid')" :tooltip="apiParams.externalid.description"/>
             <a-input
               v-decorator="['externalid', {}]"
               :placeholder="$t('label.externalid')"/>
           </a-form-item>
           <a-form-item>
-            <span slot="label">
-              {{ $t('label.gateway') }}
-              <a-tooltip :title="apiParams.gateway.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.gateway')" :tooltip="apiParams.gateway.description"/>
             <a-input
               v-decorator="['gateway', {}]"
               :placeholder="this.$t('label.gateway')"/>
           </a-form-item>
           <a-form-item>
-            <span slot="label">
-              {{ $t('label.netmask') }}
-              <a-tooltip :title="apiParams.netmask.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.netmask')" :tooltip="apiParams.netmask.description"/>
             <a-input
               v-decorator="['netmask', {}]"
               :placeholder="this.$t('label.netmask')"/>
           </a-form-item>
           <a-form-item v-if="!this.isObjectEmpty(this.selectedNetworkOffering) && !this.selectedNetworkOffering.forvpc">
-            <span slot="label">
-              {{ $t('label.networkdomain') }}
-              <a-tooltip :title="apiParams.networkdomain.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.networkdomain')" :tooltip="apiParams.networkdomain.description"/>
             <a-input
               v-decorator="['networkdomain', {}]"
               :placeholder="this.$t('label.networkdomain')"/>
           </a-form-item>
           <a-form-item v-if="this.accountVisible">
-            <span slot="label">
-              {{ $t('label.account') }}
-              <a-tooltip :title="apiParams.account.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.account')" :tooltip="apiParams.account.description"/>
             <a-input
               v-decorator="['account']"
               :placeholder="this.$t('label.account')"/>
@@ -248,9 +188,13 @@
 
 <script>
 import { api } from '@/api'
+import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'CreateIsolatedNetworkForm',
+  components: {
+    TooltipLabel
+  },
   props: {
     loading: {
       type: Boolean,
diff --git a/ui/src/views/network/CreateL2NetworkForm.vue b/ui/src/views/network/CreateL2NetworkForm.vue
index 9771e282238..2d8c98afe2a 100644
--- a/ui/src/views/network/CreateL2NetworkForm.vue
+++ b/ui/src/views/network/CreateL2NetworkForm.vue
@@ -24,12 +24,7 @@
           layout="vertical"
           @submit="handleSubmit">
           <a-form-item>
-            <span slot="label">
-              {{ $t('label.name') }}
-              <a-tooltip :title="apiParams.name.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.name')" :tooltip="apiParams.name.description"/>
             <a-input
               v-decorator="['name', {
                 rules: [{ required: true, message: $t('message.error.name') }]
@@ -38,12 +33,7 @@
               autoFocus/>
           </a-form-item>
           <a-form-item>
-            <span slot="label">
-              {{ $t('label.displaytext') }}
-              <a-tooltip :title="apiParams.displaytext.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.displaytext')" :tooltip="apiParams.displaytext.description"/>
             <a-input
               v-decorator="['displaytext', {
                 rules: [{ required: true, message: $t('message.error.display.text') }]
@@ -51,12 +41,7 @@
               :placeholder="this.$t('label.displaytext')"/>
           </a-form-item>
           <a-form-item>
-            <span slot="label">
-              {{ $t('label.zoneid') }}
-              <a-tooltip :title="apiParams.zoneid.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.zoneid')" :tooltip="apiParams.zoneid.description"/>
             <a-select
               v-decorator="['zoneid', {
                 rules: [
@@ -80,12 +65,7 @@
             </a-select>
           </a-form-item>
           <a-form-item v-if="this.isAdminOrDomainAdmin()">
-            <span slot="label">
-              {{ $t('label.domain') }}
-              <a-tooltip :title="apiParams.domainid.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.domainid')" :tooltip="apiParams.domainid.description"/>
             <a-select
               v-decorator="['domainid', {}]"
               showSearch
@@ -102,12 +82,7 @@
             </a-select>
           </a-form-item>
           <a-form-item>
-            <span slot="label">
-              {{ $t('label.networkofferingid') }}
-              <a-tooltip :title="apiParams.networkofferingid.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.networkofferingid')" :tooltip="apiParams.networkofferingid.description"/>
             <a-select
               v-decorator="['networkofferingid', {
                 rules: [
@@ -131,12 +106,7 @@
             </a-select>
           </a-form-item>
           <a-form-item v-if="!this.isObjectEmpty(this.selectedNetworkOffering) && this.selectedNetworkOffering.specifyvlan">
-            <span slot="label">
-              {{ $t('label.vlan') }}
-              <a-tooltip :title="apiParams.vlan.description" v-if="'vlan' in apiParams">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.vlan')" :tooltip="apiParams.vlan ? apiParams.vlan.description : null"/>
             <a-input
               v-decorator="['vlanid', {
                 rules: [{ required: true, message: $t('message.please.enter.value') }]
@@ -144,21 +114,11 @@
               :placeholder="this.$t('label.vlanid')"/>
           </a-form-item>
           <a-form-item v-if="!this.isObjectEmpty(this.selectedNetworkOffering) && this.selectedNetworkOffering.specifyvlan">
-            <span slot="label">
-              {{ $t('label.bypassvlanoverlapcheck') }}
-              <a-tooltip :title="apiParams.bypassvlanoverlapcheck.description" v-if="'bypassvlanoverlapcheck' in apiParams">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.bypassvlanoverlapcheck')" :tooltip="apiParams.bypassvlanoverlapcheck ? apiParams.bypassvlanoverlapcheck.description : null"/>
             <a-switch v-decorator="['bypassvlanoverlapcheck']" />
           </a-form-item>
           <a-form-item v-if="!this.isObjectEmpty(this.selectedNetworkOffering) && this.selectedNetworkOffering.specifyvlan">
-            <span slot="label">
-              {{ $t('label.isolatedpvlantype') }}
-              <a-tooltip :title="apiParams.isolatedpvlantype.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.isolatedpvlantype')" :tooltip="apiParams.isolatedpvlantype.description"/>
             <a-radio-group
               v-decorator="['isolatedpvlantype', {
                 initialValue: this.isolatePvlanType
@@ -180,23 +140,13 @@
             </a-radio-group>
           </a-form-item>
           <a-form-item v-if="this.isolatePvlanType=='community' || this.isolatePvlanType=='isolated'">
-            <span slot="label">
-              {{ $t('label.isolatedpvlanid') }}
-              <a-tooltip :title="apiParams.isolatedpvlan.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.isolatedpvlanid')" :tooltip="apiParams.isolatedpvlan.description"/>
             <a-input
               v-decorator="['isolatedpvlan', {}]"
               :placeholder="this.$t('label.isolatedpvlanid')"/>
           </a-form-item>
           <a-form-item v-if="this.accountVisible">
-            <span slot="label">
-              {{ $t('label.account') }}
-              <a-tooltip :title="apiParams.account.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.account')" :tooltip="apiParams.account.description"/>
             <a-input
               v-decorator="['account']"
               :placeholder="this.$t('label.account')"/>
@@ -222,9 +172,13 @@
 
 <script>
 import { api } from '@/api'
+import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'CreateL2NetworkForm',
+  components: {
+    TooltipLabel
+  },
   props: {
     loading: {
       type: Boolean,
diff --git a/ui/src/views/network/CreateSharedNetworkForm.vue b/ui/src/views/network/CreateSharedNetworkForm.vue
index a28a40f1e7e..d5c0c488bb9 100644
--- a/ui/src/views/network/CreateSharedNetworkForm.vue
+++ b/ui/src/views/network/CreateSharedNetworkForm.vue
@@ -23,13 +23,8 @@
           :form="form"
           layout="vertical"
           @submit="handleSubmit">
-          <a-form-item :label="$t('label.name')">
-            <span slot="label">
-              {{ $t('label.name') }}
-              <a-tooltip :title="apiParams.name.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+          <a-form-item>
+            <tooltip-label slot="label" :title="$t('label.name')" :tooltip="apiParams.name.description"/>
             <a-input
               v-decorator="['name', {
                 rules: [{ required: true, message: $t('message.error.name') }]
@@ -38,12 +33,7 @@
               autoFocus />
           </a-form-item>
           <a-form-item>
-            <span slot="label">
-              {{ $t('label.displaytext') }}
-              <a-tooltip :title="apiParams.displaytext.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.displaytext')" :tooltip="apiParams.displaytext.description"/>
             <a-input
               v-decorator="['displaytext', {
                 rules: [{ required: true, message: $t('message.error.display.text') }]
@@ -51,12 +41,7 @@
               :placeholder="this.$t('label.display.text')"/>
           </a-form-item>
           <a-form-item v-if="this.isObjectEmpty(this.zone)">
-            <span slot="label">
-              {{ $t('label.zoneid') }}
-              <a-tooltip :title="apiParams.zoneid.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.zoneid')" :tooltip="apiParams.zoneid.description"/>
             <a-select
               v-decorator="['zoneid', {
                 rules: [
@@ -80,12 +65,7 @@
             </a-select>
           </a-form-item>
           <a-form-item v-if="this.isObjectEmpty(this.zone)">
-            <span slot="label">
-              {{ $t('label.physicalnetworkid') }}
-              <a-tooltip :title="apiParams.physicalnetworkid.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.physicalnetworkid')" :tooltip="apiParams.physicalnetworkid.description"/>
             <a-select
               v-decorator="['physicalnetworkid', {}]"
               showSearch
@@ -102,12 +82,7 @@
             </a-select>
           </a-form-item>
           <a-form-item>
-            <span slot="label">
-              {{ $t('label.vlan') }}
-              <a-tooltip :title="apiParams.vlan.description" v-if="'vlan' in apiParams">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.vlan')" :tooltip="apiParams.vlan.description"/>
             <a-input
               v-decorator="['vlanid', {
                 rules: [{ required: true, message: $t('message.please.enter.value') }]
@@ -115,21 +90,11 @@
               :placeholder="this.$t('label.vlanid')"/>
           </a-form-item>
           <a-form-item>
-            <span slot="label">
-              {{ $t('label.bypassvlanoverlapcheck') }}
-              <a-tooltip :title="apiParams.bypassvlanoverlapcheck.description" v-if="'bypassvlanoverlapcheck' in apiParams">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.bypassvlanoverlapcheck')" :tooltip="apiParams.bypassvlanoverlapcheck.description"/>
             <a-switch v-decorator="['bypassvlanoverlapcheck']" />
           </a-form-item>
           <a-form-item v-if="!this.isObjectEmpty(this.selectedNetworkOffering) && this.selectedNetworkOffering.specifyvlan">
-            <span slot="label">
-              {{ $t('label.isolatedpvlantype') }}
-              <a-tooltip :title="apiParams.isolatedpvlantype.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.isolatedpvlantype')" :tooltip="apiParams.isolatedpvlantype.description"/>
             <a-radio-group
               v-decorator="['isolatedpvlantype', {
                 initialValue: this.isolatePvlanType
@@ -151,12 +116,7 @@
             </a-radio-group>
           </a-form-item>
           <a-form-item v-if="this.isolatePvlanType=='community' || this.isolatePvlanType=='isolated'">
-            <span slot="label">
-              {{ $t('label.isolatedpvlanid') }}
-              <a-tooltip :title="apiParams.isolatedpvlan.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.isolatedpvlanid')" :tooltip="apiParams.isolatedpvlan.description"/>
             <a-input
               v-decorator="['isolatedpvlan', {}]"
               :placeholder="this.$t('label.isolatedpvlanid')"/>
@@ -183,12 +143,7 @@
             </a-radio-group>
           </a-form-item>
           <a-form-item v-if="this.scopeType !== 'all'">
-            <span slot="label">
-              {{ $t('label.domain') }}
-              <a-tooltip :title="apiParams.domainid.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.domainid')" :tooltip="apiParams.domainid.description"/>
             <a-select
               v-decorator="['domainid', {
                 rules: [
@@ -212,32 +167,17 @@
             </a-select>
           </a-form-item>
           <a-form-item v-if="this.scopeType === 'domain'">
-            <span slot="label">
-              {{ $t('label.subdomainaccess') }}
-              <a-tooltip :title="apiParams.subdomainaccess.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.subdomainaccess')" :tooltip="apiParams.subdomainaccess.description"/>
             <a-switch v-decorator="['subdomainaccess']" />
           </a-form-item>
           <a-form-item v-if="this.scopeType === 'account'">
-            <span slot="label">
-              {{ $t('label.account') }}
-              <a-tooltip :title="apiParams.account.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.account')" :tooltip="apiParams.account.description"/>
             <a-input
               v-decorator="['account', {}]"
               :placeholder="this.$t('label.account')"/>
           </a-form-item>
           <a-form-item v-if="this.scopeType === 'project'">
-            <span slot="label">
-              {{ $t('label.projectid') }}
-              <a-tooltip :title="apiParams.projectid.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.projectid')" :tooltip="apiParams.projectid.description"/>
             <a-select
               v-decorator="['projectid', {
                 rules: [
@@ -261,12 +201,7 @@
             </a-select>
           </a-form-item>
           <a-form-item>
-            <span slot="label">
-              {{ $t('label.networkofferingid') }}
-              <a-tooltip :title="apiParams.networkofferingid.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.networkofferingid')" :tooltip="apiParams.networkofferingid.description"/>
             <a-select
               v-decorator="['networkofferingid', {
                 rules: [
@@ -289,134 +224,98 @@
               </a-select-option>
             </a-select>
           </a-form-item>
-          <a-form-item>
-            <span slot="label">
-              {{ $t('label.ip4gateway') }}
-              <a-tooltip :title="apiParams.gateway.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
-            <a-input
-              v-decorator="['ip4gateway', {}]"
-              :placeholder="this.$t('label.ip4gateway')"/>
-          </a-form-item>
-          <a-form-item>
-            <span slot="label">
-              {{ $t('label.ip4netmask') }}
-              <a-tooltip :title="apiParams.netmask.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
-            <a-input
-              v-decorator="['netmask', {}]"
-              :placeholder="this.$t('label.netmask')"/>
-          </a-form-item>
-          <a-form-item :label="$t('label.startipv4')">
-            <span slot="label">
-              {{ $t('label.startipv4') }}
-              <a-tooltip :title="apiParams.startip.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
-            <a-input
-              v-decorator="['startipv4', {}]"
-              :placeholder="this.$t('label.startipv4')"/>
-          </a-form-item>
-          <a-form-item>
-            <span slot="label">
-              {{ $t('label.endipv4') }}
-              <a-tooltip :title="apiParams.endip.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
-            <a-input
-              v-decorator="['endipv4', {}]"
-              :placeholder="this.$t('label.endipv4')"/>
-          </a-form-item>
+          <a-row :gutter="12">
+            <a-col :md="12" :lg="12">
+              <a-form-item>
+                <tooltip-label slot="label" :title="$t('label.ip4gateway')" :tooltip="apiParams.gateway.description"/>
+                <a-input
+                  v-decorator="['ip4gateway', {}]"
+                  :placeholder="this.$t('label.ip4gateway')"/>
+              </a-form-item>
+            </a-col>
+            <a-col :md="12" :lg="12">
+              <a-form-item>
+                <tooltip-label slot="label" :title="$t('label.netmask')" :tooltip="apiParams.netmask.description"/>
+                <a-input
+                  v-decorator="['netmask', {}]"
+                  :placeholder="this.$t('label.netmask')"/>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row :gutter="12">
+            <a-col :md="12" :lg="12">
+              <a-form-item>
+                <tooltip-label slot="label" :title="$t('label.startipv4')" :tooltip="apiParams.startip.description"/>
+                <a-input
+                  v-decorator="['startipv4', {}]"
+                  :placeholder="this.$t('label.startipv4')"/>
+              </a-form-item>
+            </a-col>
+            <a-col :md="12" :lg="12">
+              <a-form-item>
+                <tooltip-label slot="label" :title="$t('label.endipv4')" :tooltip="apiParams.endip.description"/>
+                <a-input
+                  v-decorator="['endipv4', {}]"
+                  :placeholder="this.$t('label.endipv4')"/>
+              </a-form-item>
+            </a-col>
+          </a-row>
           <a-form-item v-if="isVirtualRouterForAtLeastOneService">
-            <span slot="label">
-              {{ $t('label.routerip') }}
-              <a-tooltip :title="apiParams.routerip.description" v-if="'routerip' in apiParams">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.routerip')" :tooltip="apiParams.routerip.description"/>
             <a-input
               v-decorator="['routerip', {}]"
               :placeholder="this.$t('label.routerip')"/>
           </a-form-item>
-          <a-form-item>
-            <span slot="label">
-              {{ $t('label.ip6gateway') }}
-              <a-tooltip :title="apiParams.ip6gateway.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
-            <a-input
-              v-decorator="['ip6gateway', {}]"
-              :placeholder="this.$t('label.ip6gateway')"/>
-          </a-form-item>
-          <a-form-item>
-            <span slot="label">
-              {{ $t('label.ip6cidr') }}
-              <a-tooltip :title="apiParams.ip6cidr.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
-            <a-input
-              v-decorator="['ip6cidr', {}]"
-              :placeholder="this.$t('label.ip6cidr')"/>
-          </a-form-item>
-          <a-form-item>
-            <span slot="label">
-              {{ $t('label.startipv6') }}
-              <a-tooltip :title="apiParams.startipv6.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
-            <a-input
-              v-decorator="['startipv6', {}]"
-              :placeholder="this.$t('label.startipv6')"/>
-          </a-form-item>
-          <a-form-item>
-            <span slot="label">
-              {{ $t('label.endipv6') }}
-              <a-tooltip :title="apiParams.endipv6.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
-            <a-input
-              v-decorator="['endipv6', {}]"
-              :placeholder="this.$t('label.endipv6')"/>
-          </a-form-item>
+          <a-row :gutter="12">
+            <a-col :md="12" :lg="12">
+              <a-form-item>
+                <tooltip-label slot="label" :title="$t('label.ip6gateway')" :tooltip="apiParams.ip6gateway.description"/>
+                <a-input
+                  v-decorator="['ip6gateway', {}]"
+                  :placeholder="this.$t('label.ip6gateway')"/>
+              </a-form-item>
+            </a-col>
+            <a-col :md="12" :lg="12">
+              <a-form-item>
+                <tooltip-label slot="label" :title="$t('label.ip6cidr')" :tooltip="apiParams.ip6cidr.description"/>
+                <a-input
+                  v-decorator="['ip6cidr', {}]"
+                  :placeholder="this.$t('label.ip6cidr')"/>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row :gutter="12">
+            <a-col :md="12" :lg="12">
+              <a-form-item>
+                <tooltip-label slot="label" :title="$t('label.startipv6')" :tooltip="apiParams.startipv6.description"/>
+                <a-input
+                  v-decorator="['startipv6', {}]"
+                  :placeholder="this.$t('label.startipv6')"/>
+              </a-form-item>
+            </a-col>
+            <a-col :md="12" :lg="12">
+              <a-form-item>
+                <tooltip-label slot="label" :title="$t('label.endipv6')" :tooltip="apiParams.endipv6.description"/>
+                <a-input
+                  v-decorator="['endipv6', {}]"
+                  :placeholder="this.$t('label.endipv6')"/>
+              </a-form-item>
+            </a-col>
+          </a-row>
           <a-form-item v-if="isVirtualRouterForAtLeastOneService">
-            <span slot="label">
-              {{ $t('label.routeripv6') }}
-              <a-tooltip :title="apiParams.routeripv6.description" v-if="'routeripv6' in apiParams">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.routeripv6')" :tooltip="apiParams.routeripv6.description"/>
             <a-input
               v-decorator="['routeripv6', {}]"
               :placeholder="this.$t('label.routeripv6')"/>
           </a-form-item>
           <a-form-item>
-            <span slot="label">
-              {{ $t('label.networkdomain') }}
-              <a-tooltip :title="apiParams.networkdomain.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.networkdomain')" :tooltip="apiParams.networkdomain.description"/>
             <a-input
               v-decorator="['networkdomain', {}]"
               :placeholder="this.$t('label.networkdomain')"/>
           </a-form-item>
           <a-form-item>
-            <span slot="label">
-              {{ $t('label.hideipaddressusage') }}
-              <a-tooltip :title="apiParams.hideipaddressusage.description" v-if="'hideipaddressusage' in apiParams">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.hideipaddressusage')" :tooltip="apiParams.hideipaddressusage.description"/>
             <a-switch v-decorator="['hideipaddressusage']" />
           </a-form-item>
           <div :span="24" class="action-button">
@@ -440,9 +339,13 @@
 
 <script>
 import { api } from '@/api'
+import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'CreateGuestNetworkForm',
+  components: {
+    TooltipLabel
+  },
   props: {
     loading: {
       type: Boolean,
diff --git a/ui/src/views/network/CreateVlanIpRange.vue b/ui/src/views/network/CreateVlanIpRange.vue
index 60f638ee423..a728d5dba5c 100644
--- a/ui/src/views/network/CreateVlanIpRange.vue
+++ b/ui/src/views/network/CreateVlanIpRange.vue
@@ -23,7 +23,8 @@
           :form="form"
           @submit="handleSubmit"
           layout="vertical">
-          <a-form-item :label="$t('label.podid')" v-if="pods && pods.length > 0">
+          <a-form-item v-if="pods && pods.length > 0">
+            <tooltip-label slot="label" :title="$t('label.podid')" :tooltip="apiParams.podid.description"/>
             <a-select
               autoFocus
               v-decorator="['podid', {
@@ -35,12 +36,7 @@
             </a-select>
           </a-form-item>
           <a-form-item>
-            <span slot="label">
-              {{ $t('label.gateway') }}
-              <a-tooltip :title="apiParams.gateway.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.gateway')" :tooltip="apiParams.gateway.description"/>
             <a-input
               autoFocus
               v-decorator="['gateway', {
@@ -49,12 +45,7 @@
               :placeholder="apiParams.gateway.description"/>
           </a-form-item>
           <a-form-item>
-            <span slot="label">
-              {{ $t('label.netmask') }}
-              <a-tooltip :title="apiParams.netmask.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.netmask')" :tooltip="apiParams.netmask.description"/>
             <a-input
               v-decorator="['netmask', {
                 rules: [{ required: true, message: $t('message.error.netmask') }]
@@ -64,12 +55,7 @@
           <a-row :gutter="12">
             <a-col :md="12" lg="12">
               <a-form-item>
-                <span slot="label">
-                  {{ $t('label.startipv4') }}
-                  <a-tooltip :title="apiParams.startip.description">
-                    <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-                  </a-tooltip>
-                </span>
+                <tooltip-label slot="label" :title="$t('label.startipv4')" :tooltip="apiParams.startip.description"/>
                 <a-input
                   v-decorator="['startip', {
                     rules: [
@@ -86,12 +72,7 @@
             </a-col>
             <a-col :md="12" :lg="12">
               <a-form-item>
-                <span slot="label">
-                  {{ $t('label.endipv4') }}
-                  <a-tooltip :title="apiParams.endip.description">
-                    <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-                  </a-tooltip>
-                </span>
+                <tooltip-label slot="label" :title="$t('label.endipv4')" :tooltip="apiParams.endip.description"/>
                 <a-input
                   v-decorator="['endip', {
                     rules: [
@@ -108,23 +89,13 @@
             </a-col>
           </a-row>
           <a-form-item>
-            <span slot="label">
-              {{ $t('label.ip6cidr') }}
-              <a-tooltip :title="apiParams.ip6cidr.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.ip6cidr')" :tooltip="apiParams.ip6cidr.description"/>
             <a-input
               v-decorator="['ip6cidr']"
               :placeholder="apiParams.ip6cidr.description"/>
           </a-form-item>
           <a-form-item>
-            <span slot="label">
-              {{ $t('label.ip6gateway') }}
-              <a-tooltip :title="apiParams.ip6gateway.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.ip6gateway')" :tooltip="apiParams.ip6gateway.description"/>
             <a-input
               v-decorator="['ip6gateway']"
               :placeholder="apiParams.ip6gateway.description"/>
@@ -132,12 +103,7 @@
           <a-row :gutter="12">
             <a-col :md="12" :lg="12">
               <a-form-item>
-                <span slot="label">
-                  {{ $t('label.startipv6') }}
-                  <a-tooltip :title="apiParams.startipv6.description">
-                    <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-                  </a-tooltip>
-                </span>
+                <tooltip-label slot="label" :title="$t('label.startipv6')" :tooltip="apiParams.startipv6.description"/>
                 <a-input
                   v-decorator="['startipv6', {
                     rules: [
@@ -153,12 +119,7 @@
             </a-col>
             <a-col :md="12" :lg="12">
               <a-form-item>
-                <span slot="label">
-                  {{ $t('label.endipv6') }}
-                  <a-tooltip :title="apiParams.endipv6.description">
-                    <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-                  </a-tooltip>
-                </span>
+                <tooltip-label slot="label" :title="$t('label.endipv6')" :tooltip="apiParams.endipv6.description"/>
                 <a-input
                   v-decorator="['endipv6', {
                     rules: [
@@ -194,9 +155,13 @@
 
 <script>
 import { api } from '@/api'
+import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'CreateVlanIpRange',
+  components: {
+    TooltipLabel
+  },
   props: {
     resource: {
       type: Object,
diff --git a/ui/src/views/network/CreateVpc.vue b/ui/src/views/network/CreateVpc.vue
index 4d3ebffd03a..2b5546af477 100644
--- a/ui/src/views/network/CreateVpc.vue
+++ b/ui/src/views/network/CreateVpc.vue
@@ -21,12 +21,7 @@
         :form="form"
         layout="vertical">
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.name') }}
-            <a-tooltip :title="apiParams.name.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.name')" :tooltip="apiParams.name.description"/>
           <a-input
             v-decorator="['name', {
               rules: [{ required: true, message: $t('message.error.required.input') }]
@@ -35,12 +30,7 @@
             autoFocus/>
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.displaytext') }}
-            <a-tooltip :title="apiParams.displaytext.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.displaytext')" :tooltip="apiParams.displaytext.description"/>
           <a-input
             v-decorator="['displaytext', {
               rules: [{ required: true, message: $t('message.error.required.input') }]
@@ -48,12 +38,7 @@
             :placeholder="apiParams.displaytext.description"/>
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.zoneid') }}
-            <a-tooltip :title="apiParams.zoneid.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.zoneid')" :tooltip="apiParams.zoneid.description"/>
           <a-select
             :loading="loadingZone"
             v-decorator="['zoneid', {
@@ -67,12 +52,7 @@
           </a-select>
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.cidr') }}
-            <a-tooltip :title="apiParams.cidr.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.cidr')" :tooltip="apiParams.cidr.description"/>
           <a-input
             v-decorator="['cidr', {
               rules: [{ required: true, message: $t('message.error.required.input') }]
@@ -80,23 +60,13 @@
             :placeholder="apiParams.cidr.description"/>
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.networkdomain') }}
-            <a-tooltip :title="apiParams.networkdomain.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.networkdomain')" :tooltip="apiParams.networkdomain.description"/>
           <a-input
             v-decorator="['networkdomain']"
             :placeholder="apiParams.networkdomain.description"/>
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.vpcofferingid') }}
-            <a-tooltip :title="apiParams.vpcofferingid.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.vpcofferingid')" :tooltip="apiParams.vpcofferingid.description"/>
           <a-select
             :loading="loadingOffering"
             v-decorator="['vpcofferingid', {
@@ -108,12 +78,7 @@
           </a-select>
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.start') }}
-            <a-tooltip :title="apiParams.start.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.start')" :tooltip="apiParams.start.description"/>
           <a-switch v-decorator="['start', {initialValue: true}]" defaultChecked />
         </a-form-item>
       </a-form>
@@ -126,8 +91,13 @@
 </template>
 <script>
 import { api } from '@/api'
+import TooltipLabel from '@/components/widgets/TooltipLabel'
+
 export default {
   name: 'CreateVpc',
+  components: {
+    TooltipLabel
+  },
   data () {
     return {
       loading: false,
diff --git a/ui/src/views/network/CreateVpnCustomerGateway.vue b/ui/src/views/network/CreateVpnCustomerGateway.vue
index 666bece867b..71e37329d52 100644
--- a/ui/src/views/network/CreateVpnCustomerGateway.vue
+++ b/ui/src/views/network/CreateVpnCustomerGateway.vue
@@ -18,12 +18,7 @@
   <div>
     <a-form class="form-layout" :form="form" layout="vertical">
       <a-form-item>
-        <span slot="label">
-          {{ $t('label.name') }}
-          <a-tooltip :title="apiParams.name.description">
-            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-          </a-tooltip>
-        </span>
+        <tooltip-label slot="label" :title="$t('label.name')" :tooltip="apiParams.name.description"/>
         <a-input
           v-decorator="[
             'name',
@@ -35,12 +30,7 @@
           autoFocus />
       </a-form-item>
       <a-form-item>
-        <span slot="label">
-          {{ $t('label.gateway') }}
-          <a-tooltip :title="apiParams.gateway.description">
-            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-          </a-tooltip>
-        </span>
+        <tooltip-label slot="label" :title="$t('label.gateway')" :tooltip="apiParams.gateway.description"/>
         <a-input
           v-decorator="[
             'gateway',
@@ -51,12 +41,7 @@
           :placeholder="$t('label.vpncustomergateway')" />
       </a-form-item>
       <a-form-item>
-        <span slot="label">
-          {{ $t('label.cidrlist') }}
-          <a-tooltip :title="apiParams.cidrlist.description">
-            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-          </a-tooltip>
-        </span>
+        <tooltip-label slot="label" :title="$t('label.cidrlist')" :tooltip="apiParams.cidrlist.description"/>
         <a-input
           v-decorator="[
             'cidrlist',
@@ -67,12 +52,7 @@
           :placeholder="$t('label.vpncustomergateway.cidrlist')" />
       </a-form-item>
       <a-form-item>
-        <span slot="label">
-          {{ $t('label.ipsecpsk') }}
-          <a-tooltip :title="apiParams.ipsecpsk.description">
-            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-          </a-tooltip>
-        </span>
+        <tooltip-label slot="label" :title="$t('label.ipsecpsk')" :tooltip="apiParams.ipsecpsk.description"/>
         <a-input
           v-decorator="[
             'ipsecpsk',
@@ -109,12 +89,7 @@
         </a-select>
       </a-form-item>
       <a-form-item>
-        <span slot="label">
-          {{ $t('label.ikeversion') }}
-          <a-tooltip :title="apiParams.ikeversion.description">
-            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-          </a-tooltip>
-        </span>
+        <tooltip-label slot="label" :title="$t('label.ikeversion')" :tooltip="apiParams.ikeversion.description"/>
         <a-select
           v-decorator="[
             'ikeversion',
@@ -192,12 +167,7 @@
         </a-select>
       </a-form-item>
       <a-form-item>
-        <span slot="label">
-          {{ $t('label.ikelifetime') }}
-          <a-tooltip :title="apiParams.ikelifetime.description">
-            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-          </a-tooltip>
-        </span>
+        <tooltip-label slot="label" :title="$t('label.ikelifetime')" :tooltip="apiParams.ikelifetime.description"/>
         <a-input
           v-decorator="[
             'ikelifetime',
@@ -208,12 +178,7 @@
           :placeholder="$t('label.vpncustomergateway.ikelifetime')"/>
       </a-form-item>
       <a-form-item>
-        <span slot="label">
-          {{ $t('label.esplifetime') }}
-          <a-tooltip :title="apiParams.esplifetime.description">
-            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-          </a-tooltip>
-        </span>
+        <tooltip-label slot="label" :title="$t('label.esplifetime')" :tooltip="apiParams.esplifetime.description"/>
         <a-input
           v-decorator="[
             'esplifetime',
@@ -224,12 +189,7 @@
           :placeholder="$t('label.vpncustomergateway.esplifetime')"/>
       </a-form-item>
       <a-form-item>
-        <span slot="label">
-          {{ $t('label.dpd') }}
-          <a-tooltip :title="apiParams.dpd.description">
-            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-          </a-tooltip>
-        </span>
+        <tooltip-label slot="label" :title="$t('label.dpd')" :tooltip="apiParams.dpd.description"/>
         <a-switch
           v-decorator="[
             'dpd',
@@ -239,12 +199,7 @@
           ]"/>
       </a-form-item>
       <a-form-item v-if="ikeversion !== 'ikev1'">
-        <span slot="label">
-          {{ $t('label.splitconnections') }}
-          <a-tooltip :title="apiParams.splitconnections.description">
-            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-          </a-tooltip>
-        </span>
+        <tooltip-label slot="label" :title="$t('label.splitconnections')" :tooltip="apiParams.splitconnections.description"/>
         <a-switch
           v-decorator="[
             'splitconnections',
@@ -254,12 +209,7 @@
           ]"/>
       </a-form-item>
       <a-form-item>
-        <span slot="label">
-          {{ $t('label.forceencap') }}
-          <a-tooltip :title="apiParams.forceencap.description">
-            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-          </a-tooltip>
-        </span>
+        <tooltip-label slot="label" :title="$t('label.forceencap')" :tooltip="apiParams.forceencap.description"/>
         <a-switch
           v-decorator="[
             'forceencap',
@@ -281,8 +231,13 @@
 </template>
 <script>
 import { api } from '@/api'
+import TooltipLabel from '@/components/widgets/TooltipLabel'
+
 export default {
   name: 'CreateVpnCustomerGateway',
+  components: {
+    TooltipLabel
+  },
   props: {
     resource: {
       type: Object,
diff --git a/ui/src/views/network/EgressRulesTab.vue b/ui/src/views/network/EgressRulesTab.vue
index 6823a0bc216..18d26669eaa 100644
--- a/ui/src/views/network/EgressRulesTab.vue
+++ b/ui/src/views/network/EgressRulesTab.vue
@@ -102,7 +102,7 @@
 
 <script>
 import { api } from '@/api'
-import TooltipButton from '@/components/view/TooltipButton'
+import TooltipButton from '@/components/widgets/TooltipButton'
 
 export default {
   name: 'EgressRulesTab',
diff --git a/ui/src/views/network/FirewallRules.vue b/ui/src/views/network/FirewallRules.vue
index 5996089ae68..eea142fc091 100644
--- a/ui/src/views/network/FirewallRules.vue
+++ b/ui/src/views/network/FirewallRules.vue
@@ -137,7 +137,7 @@
 
 <script>
 import { api } from '@/api'
-import TooltipButton from '@/components/view/TooltipButton'
+import TooltipButton from '@/components/widgets/TooltipButton'
 
 export default {
   components: {
diff --git a/ui/src/views/network/GuestIpRanges.vue b/ui/src/views/network/GuestIpRanges.vue
index abc92e0185a..928224de4eb 100644
--- a/ui/src/views/network/GuestIpRanges.vue
+++ b/ui/src/views/network/GuestIpRanges.vue
@@ -88,7 +88,7 @@
 <script>
 import { api } from '@/api'
 import CreateVlanIpRange from '@/views/network/CreateVlanIpRange'
-import TooltipButton from '@/components/view/TooltipButton'
+import TooltipButton from '@/components/widgets/TooltipButton'
 export default {
   name: 'GuestIpRanges',
   components: {
diff --git a/ui/src/views/network/IngressEgressRuleConfigure.vue b/ui/src/views/network/IngressEgressRuleConfigure.vue
index 59a0b240bbe..9d76dab95ea 100644
--- a/ui/src/views/network/IngressEgressRuleConfigure.vue
+++ b/ui/src/views/network/IngressEgressRuleConfigure.vue
@@ -170,7 +170,7 @@
 
 <script>
 import { api } from '@/api'
-import TooltipButton from '@/components/view/TooltipButton'
+import TooltipButton from '@/components/widgets/TooltipButton'
 
 export default {
   components: {
diff --git a/ui/src/views/network/InternalLBAssignedVmTab.vue b/ui/src/views/network/InternalLBAssignedVmTab.vue
index 033797ac62b..d2b58b38d03 100644
--- a/ui/src/views/network/InternalLBAssignedVmTab.vue
+++ b/ui/src/views/network/InternalLBAssignedVmTab.vue
@@ -63,7 +63,7 @@
 </template>
 <script>
 import { api } from '@/api'
-import TooltipButton from '@/components/view/TooltipButton'
+import TooltipButton from '@/components/widgets/TooltipButton'
 
 export default {
   name: 'InternalLBAssignedVmTab',
diff --git a/ui/src/views/network/IpAddressesTab.vue b/ui/src/views/network/IpAddressesTab.vue
index 4e630095b92..d54b1fb9552 100644
--- a/ui/src/views/network/IpAddressesTab.vue
+++ b/ui/src/views/network/IpAddressesTab.vue
@@ -129,7 +129,7 @@
 <script>
 import { api } from '@/api'
 import Status from '@/components/widgets/Status'
-import TooltipButton from '@/components/view/TooltipButton'
+import TooltipButton from '@/components/widgets/TooltipButton'
 
 export default {
   name: 'IpAddressesTab',
diff --git a/ui/src/views/network/LoadBalancing.vue b/ui/src/views/network/LoadBalancing.vue
index 45e4d158642..6a0877f158d 100644
--- a/ui/src/views/network/LoadBalancing.vue
+++ b/ui/src/views/network/LoadBalancing.vue
@@ -384,7 +384,7 @@
 <script>
 import { api } from '@/api'
 import Status from '@/components/widgets/Status'
-import TooltipButton from '@/components/view/TooltipButton'
+import TooltipButton from '@/components/widgets/TooltipButton'
 
 export default {
   name: 'LoadBalancing',
diff --git a/ui/src/views/network/PortForwarding.vue b/ui/src/views/network/PortForwarding.vue
index 893187646e2..af394728bda 100644
--- a/ui/src/views/network/PortForwarding.vue
+++ b/ui/src/views/network/PortForwarding.vue
@@ -252,7 +252,7 @@
 <script>
 import { api } from '@/api'
 import Status from '@/components/widgets/Status'
-import TooltipButton from '@/components/view/TooltipButton'
+import TooltipButton from '@/components/widgets/TooltipButton'
 
 export default {
   components: {
diff --git a/ui/src/views/network/StaticRoutesTab.vue b/ui/src/views/network/StaticRoutesTab.vue
index 53a01c08880..4477a494528 100644
--- a/ui/src/views/network/StaticRoutesTab.vue
+++ b/ui/src/views/network/StaticRoutesTab.vue
@@ -76,7 +76,7 @@
 
 <script>
 import { api } from '@/api'
-import TooltipButton from '@/components/view/TooltipButton'
+import TooltipButton from '@/components/widgets/TooltipButton'
 
 export default {
   name: 'StaticRoutesTab',
diff --git a/ui/src/views/network/VpcTiersTab.vue b/ui/src/views/network/VpcTiersTab.vue
index de2153bfdc1..569f9eb43c4 100644
--- a/ui/src/views/network/VpcTiersTab.vue
+++ b/ui/src/views/network/VpcTiersTab.vue
@@ -177,12 +177,7 @@
             </a-select>
           </a-form-item>
           <a-form-item v-if="!this.isObjectEmpty(this.selectedNetworkOffering) && this.selectedNetworkOffering.specifyvlan">
-            <span slot="label">
-              {{ $t('label.vlan') }}
-              <a-tooltip :title="$t('label.vlan')">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.vlan')" :tooltip="$t('label.vlan')"/>
             <a-input
               v-decorator="['vlan', {
                 rules: [{ required: true, message: $t('message.please.enter.value') }]
@@ -275,11 +270,13 @@
 <script>
 import { api } from '@/api'
 import Status from '@/components/widgets/Status'
+import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'VpcTiersTab',
   components: {
-    Status
+    Status,
+    TooltipLabel
   },
   props: {
     resource: {
diff --git a/ui/src/views/offering/AddComputeOffering.vue b/ui/src/views/offering/AddComputeOffering.vue
index c61d2d10a07..05c24b549dc 100644
--- a/ui/src/views/offering/AddComputeOffering.vue
+++ b/ui/src/views/offering/AddComputeOffering.vue
@@ -23,39 +23,24 @@
         @submit="handleSubmit"
         layout="vertical">
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.name') }}
-            <a-tooltip :title="apiParams.name.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.name')" :tooltip="apiParams.name.description"/>
           <a-input
             autoFocus
             v-decorator="['name', {
               rules: [{ required: true, message: $t('message.error.required.input') }]
             }]"
-            :placeholder="this.$t('label.name')"/>
+            :placeholder="apiParams.name.description"/>
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.displaytext') }}
-            <a-tooltip :title="apiParams.displaytext.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.displaytext')" :tooltip="apiParams.displaytext.description"/>
           <a-input
             v-decorator="['displaytext', {
               rules: [{ required: true, message: $t('message.error.required.input') }]
             }]"
-            :placeholder="this.$t('label.displaytext')"/>
+            :placeholder="apiParams.displaytext.description"/>
         </a-form-item>
-        <a-form-item v-if="this.isSystem">
-          <span slot="label">
-            {{ $t('label.systemvmtype') }}
-            <a-tooltip :title="apiParams.systemvmtype.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+        <a-form-item v-if="isSystem">
+          <tooltip-label slot="label" :title="$t('label.systemvmtype')" :tooltip="apiParams.systemvmtype.description"/>
           <a-select
             v-decorator="['systemvmtype', {
               initialValue: 'domainrouter'
@@ -65,25 +50,20 @@
             :filterOption="(input, option) => {
               return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
-            :placeholder="this.$t('label.systemvmtype')">
+            :placeholder="apiParams.systemvmtype.description">
             <a-select-option key="domainrouter">{{ $t('label.domain.router') }}</a-select-option>
             <a-select-option key="consoleproxy">{{ $t('label.console.proxy') }}</a-select-option>
             <a-select-option key="secondarystoragevm">{{ $t('label.secondary.storage.vm') }}</a-select-option>
           </a-select>
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.storagetype') }}
-            <a-tooltip :title="apiParams.storagetype.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.storagetype')" :tooltip="apiParams.storagetype.description"/>
           <a-radio-group
             v-decorator="['storagetype', {
-              initialValue: this.storageType
+              initialValue: storageType
             }]"
             buttonStyle="solid"
-            @change="selected => { this.handleStorageTypeChange(selected.target.value) }">
+            @change="selected => { handleStorageTypeChange(selected.target.value) }">
             <a-radio-button value="shared">
               {{ $t('label.shared') }}
             </a-radio-button>
@@ -93,18 +73,13 @@
           </a-radio-group>
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.provisioningtype') }}
-            <a-tooltip :title="apiParams.provisioningtype.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.provisioningtype')" :tooltip="apiParams.provisioningtype.description"/>
           <a-radio-group
             v-decorator="['provisioningtype', {
-              initialValue: this.provisioningType
+              initialValue: provisioningType
             }]"
             buttonStyle="solid"
-            @change="selected => { this.handleProvisioningTypeChange(selected.target.value) }">
+            @change="selected => { handleProvisioningTypeChange(selected.target.value) }">
             <a-radio-button value="thin">
               {{ $t('label.provisioningtype.thin') }}
             </a-radio-button>
@@ -117,18 +92,13 @@
           </a-radio-group>
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.cachemode') }}
-            <a-tooltip :title="apiParams.cachemode.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.cachemode')" :tooltip="apiParams.cachemode.description"/>
           <a-radio-group
             v-decorator="['cachemode', {
-              initialValue: this.cacheMode
+              initialValue: cacheMode
             }]"
             buttonStyle="solid"
-            @change="selected => { this.handleCacheModeChange(selected.target.value) }">
+            @change="selected => { handleCacheModeChange(selected.target.value) }">
             <a-radio-button value="none">
               {{ $t('label.nodiskcache') }}
             </a-radio-button>
@@ -140,13 +110,13 @@
             </a-radio-button>
           </a-radio-group>
         </a-form-item>
-        <a-form-item :label="$t('label.offeringtype')" v-show="!this.isSystem">
+        <a-form-item :label="$t('label.offeringtype')" v-show="!isSystem">
           <a-radio-group
             v-decorator="['offeringtype', {
-              initialValue: this.offeringType
+              initialValue: offeringType
             }]"
             buttonStyle="solid"
-            @change="selected => { this.handleComputeOfferingTypeChange(selected.target.value) }">
+            @change="selected => { handleComputeOfferingTypeChange(selected.target.value) }">
             <a-radio-button value="fixed">
               {{ $t('label.fixed') }}
             </a-radio-button>
@@ -158,211 +128,107 @@
             </a-radio-button>
           </a-radio-group>
         </a-form-item>
-        <a-form-item v-if="this.offeringType === 'fixed'">
-          <span slot="label">
-            {{ $t('label.cpunumber') }}
-            <a-tooltip :title="apiParams.cpunumber.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
-          <a-input
-            v-decorator="['cpunumber', {
-              rules: [{ required: true, message: $t('message.error.required.input') },
-                      {
-                        validator: (rule, value, callback) => {
-                          if (value && (isNaN(value) || value <= 0)) {
-                            callback(this.$t('message.error.number'))
-                          }
-                          callback()
-                        }
-                      }
-              ]
-            }]"
-            :placeholder="this.$t('label.cpunumber')"/>
-        </a-form-item>
-        <a-form-item v-if="this.offeringType !== 'customunconstrained'">
-          <span slot="label">
-            {{ $t('label.cpuspeed') }}
-            <a-tooltip :title="apiParams.cpuspeed.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
-          <a-input
-            v-decorator="['cpuspeed', {
-              rules: [{ required: true, message: $t('message.error.required.input') },
-                      {
-                        validator: (rule, value, callback) => {
-                          if (value && (isNaN(value) || value < 0)) {
-                            callback(this.$t('message.error.number'))
-                          }
-                          callback()
-                        }
-                      }
-              ]
-            }]"
-            :placeholder="this.$t('label.cpuspeed')"/>
-        </a-form-item>
-        <a-form-item v-if="this.offeringType === 'customconstrained'">
-          <span slot="label">
-            {{ $t('label.mincpunumber') }}
-            <a-tooltip :title="apiParams.mincpunumber.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
-          <a-input
-            v-decorator="['mincpunumber', {
-              rules: [{ required: true, message: $t('message.error.required.input') },
-                      {
-                        validator: (rule, value, callback) => {
-                          if (value && (isNaN(value) || value <= 0)) {
-                            callback(this.$t('message.error.number'))
-                          }
-                          callback()
-                        }
-                      }
-              ]
-            }]"
-            :placeholder="this.$t('label.mincpunumber')"/>
-        </a-form-item>
-        <a-form-item v-if="this.offeringType === 'customconstrained'">
-          <span slot="label">
-            {{ $t('label.maxcpunumber') }}
-            <a-tooltip :title="apiParams.maxcpunumber.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
-          <a-input
-            v-decorator="['maxcpunumber', {
-              rules: [{ required: true, message: $t('message.error.required.input') },
-                      {
-                        validator: (rule, value, callback) => {
-                          if (value && (isNaN(value) || value <= 0)) {
-                            callback(this.$t('message.error.number'))
-                          }
-                          callback()
-                        }
-                      }
-              ]
-            }]"
-            :placeholder="this.$t('label.maxcpunumber')"/>
-        </a-form-item>
-        <a-form-item v-if="this.offeringType === 'fixed'">
-          <span slot="label">
-            {{ $t('label.memory.mb') }}
-            <a-tooltip :title="apiParams.memory.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
-          <a-input
-            v-decorator="['memory', {
-              rules: [{ required: true, message: $t('message.error.required.input') },
-                      {
-                        validator: (rule, value, callback) => {
-                          if (value && (isNaN(value) || value <= 0)) {
-                            callback(this.$t('message.error.number'))
-                          }
-                          callback()
-                        }
-                      }
-              ]
-            }]"
-            :placeholder="this.$t('label.memory')"/>
-        </a-form-item>
-        <a-form-item v-if="this.offeringType === 'customconstrained'">
-          <span slot="label">
-            {{ $t('label.minmemory') }}
-            <a-tooltip :title="apiParams.minmemory.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
-          <a-input
-            v-decorator="['minmemory', {
-              rules: [{ required: true, message: $t('message.error.required.input') },
-                      {
-                        validator: (rule, value, callback) => {
-                          if (value && (isNaN(value) || value <= 0)) {
-                            callback(this.$t('message.error.number'))
-                          }
-                          callback()
-                        }
-                      }
-              ]
-            }]"
-            :placeholder="this.$t('label.minmemory')"/>
-        </a-form-item>
-        <a-form-item v-if="this.offeringType === 'customconstrained'">
-          <span slot="label">
-            {{ $t('label.maxmemory') }}
-            <a-tooltip :title="apiParams.maxmemory.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
-          <a-input
-            v-decorator="['maxmemory', {
-              rules: [{ required: true, message: $t('message.error.required.input') },
-                      {
-                        validator: (rule, value, callback) => {
-                          if (value && (isNaN(value) || value <= 0)) {
-                            callback(this.$t('message.error.number'))
-                          }
-                          callback()
-                        }
-                      }
-              ]
-            }]"
-            :placeholder="this.$t('label.maxmemory')"/>
-        </a-form-item>
-        <a-form-item>
-          <span slot="label">
-            {{ $t('label.networkrate') }}
-            <a-tooltip :title="apiParams.networkrate.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
-          <a-input
-            v-decorator="['networkrate', {
-              rules: [
-                {
-                  validator: (rule, value, callback) => {
-                    if (value && (isNaN(value) || value <= 0)) {
-                      callback(this.$t('message.error.number'))
-                    }
-                    callback()
-                  }
-                }
-              ]
-            }]"
-            :placeholder="this.$t('label.networkrate')"/>
-        </a-form-item>
-        <a-form-item v-if="apiParams.rootdisksize">
-          <span slot="label">
-            {{ $t('label.root.disk.size') }}
-            <a-tooltip :title="apiParams.rootdisksize.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
-          <a-input
-            v-decorator="['rootdisksize', {
-              rules: [
-                {
-                  validator: (rule, value, callback) => {
-                    if (value && (isNaN(value) || value <= 0)) {
-                      callback(this.$t('message.error.number'))
-                    }
-                    callback()
-                  }
-                }
-              ]
-            }]"
-            :placeholder="this.$t('label.root.disk.size')"/>
-        </a-form-item>
+        <a-row :gutter="12">
+          <a-col :md="8" :lg="8" v-if="offeringType === 'fixed'">
+            <a-form-item>
+              <tooltip-label slot="label" :title="$t('label.cpunumber')" :tooltip="apiParams.cpunumber.description"/>
+              <a-input
+                v-decorator="['cpunumber', {
+                  rules: [{ required: true, message: $t('message.error.required.input') }, naturalNumberRule]
+                }]"
+                :placeholder="apiParams.cpunumber.description"/>
+            </a-form-item>
+          </a-col>
+          <a-col :md="8" :lg="8" v-if="offeringType !== 'customunconstrained'">
+            <a-form-item>
+              <tooltip-label slot="label" :title="$t('label.cpuspeed')" :tooltip="apiParams.cpuspeed.description"/>
+              <a-input
+                v-decorator="['cpuspeed', {
+                  rules: [{ required: true, message: $t('message.error.required.input') }, wholeNumberRule]
+                }]"
+                :placeholder="apiParams.cpuspeed.description"/>
+            </a-form-item>
+          </a-col>
+          <a-col :md="8" :lg="8" v-if="offeringType === 'fixed'">
+            <a-form-item>
+              <tooltip-label slot="label" :title="$t('label.memory.mb')" :tooltip="apiParams.memory.description"/>
+              <a-input
+                v-decorator="['memory', {
+                  rules: [{ required: true, message: $t('message.error.required.input') }, naturalNumberRule]
+                }]"
+                :placeholder="apiParams.memory.description"/>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="12" v-if="offeringType === 'customconstrained'">
+          <a-col :md="12" :lg="12">
+            <a-form-item>
+              <tooltip-label slot="label" :title="$t('label.mincpunumber')" :tooltip="apiParams.mincpunumber.description"/>
+              <a-input
+                v-decorator="['mincpunumber', {
+                  rules: [{ required: true, message: $t('message.error.required.input') }, naturalNumberRule]
+                }]"
+                :placeholder="apiParams.mincpunumber.description"/>
+            </a-form-item>
+          </a-col>
+          <a-col :md="12" :lg="12">
+            <a-form-item>
+              <tooltip-label slot="label" :title="$t('label.maxcpunumber')" :tooltip="apiParams.maxcpunumber.description"/>
+              <a-input
+                v-decorator="['maxcpunumber', {
+                  rules: [{ required: true, message: $t('message.error.required.input') }, naturalNumberRule]
+                }]"
+                :placeholder="apiParams.maxcpunumber.description"/>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="12" v-if="offeringType === 'customconstrained'">
+          <a-col :md="12" :lg="12">
+            <a-form-item>
+              <tooltip-label slot="label" :title="$t('label.minmemory')" :tooltip="apiParams.minmemory.description"/>
+              <a-input
+                v-decorator="['minmemory', {
+                  rules: [{ required: true, message: $t('message.error.required.input') }, naturalNumberRule]
+                }]"
+                :placeholder="apiParams.minmemory.description"/>
+            </a-form-item>
+          </a-col>
+          <a-col :md="12" :lg="12">
+            <a-form-item>
+              <tooltip-label slot="label" :title="$t('label.maxmemory')" :tooltip="apiParams.maxmemory.description"/>
+              <a-input
+                v-decorator="['maxmemory', {
+                  rules: [{ required: true, message: $t('message.error.required.input') }, naturalNumberRule]
+                }]"
+                :placeholder="apiParams.maxmemory.description"/>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="12">
+          <a-col :md="12" :lg="12">
+            <a-form-item>
+              <tooltip-label slot="label" :title="$t('label.networkrate')" :tooltip="apiParams.networkrate.description"/>
+              <a-input
+                v-decorator="['networkrate', { rules: [naturalNumberRule] }]"
+                :placeholder="apiParams.networkrate.description"/>
+            </a-form-item>
+          </a-col>
+          <a-col :md="12" :lg="12">
+            <a-form-item v-if="apiParams.rootdisksize">
+              <tooltip-label slot="label" :title="$t('label.root.disk.size')" :tooltip="apiParams.rootdisksize.description"/>
+              <a-input
+                v-decorator="['rootdisksize', { rules: [naturalNumberRule] }]"
+                :placeholder="apiParams.rootdisksize.description"/>
+            </a-form-item>
+          </a-col>
+        </a-row>
         <a-form-item :label="$t('label.qostype')">
           <a-radio-group
             v-decorator="['qostype', {
-              initialValue: this.qosType
+              initialValue: qosType
             }]"
             buttonStyle="solid"
-            @change="selected => { this.handleQosTypeChange(selected.target.value) }">
+            @change="selected => { handleQosTypeChange(selected.target.value) }">
             <a-radio-button value="">
               {{ $t('label.none') }}
             </a-radio-button>
@@ -374,235 +240,133 @@
             </a-radio-button>
           </a-radio-group>
         </a-form-item>
-        <a-form-item v-if="this.qosType === 'hypervisor'">
-          <span slot="label">
-            {{ $t('label.diskbytesreadrate') }}
-            <a-tooltip :title="apiParams.bytesreadrate.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+        <a-row :gutter="12" v-if="qosType === 'hypervisor'">
+          <a-col :md="12" :lg="12">
+            <a-form-item>
+              <tooltip-label slot="label" :title="$t('label.diskbytesreadrate')" :tooltip="apiParams.bytesreadrate.description"/>
+              <a-input
+                v-decorator="['diskbytesreadrate', { rules: [naturalNumberRule] }]"
+                :placeholder="apiParams.bytesreadrate.description"/>
+            </a-form-item>
+          </a-col>
+          <a-col :md="12" :lg="12">
+            <a-form-item>
+              <tooltip-label slot="label" :title="$t('label.diskbyteswriterate')" :tooltip="apiParams.byteswriterate.description"/>
+              <a-input
+                v-decorator="['diskbyteswriterate', { rules: [naturalNumberRule] }]"
+                :placeholder="apiParams.byteswriterate.description"/>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="12" v-if="qosType === 'hypervisor'">
+          <a-col :md="12" :lg="12">
+            <a-form-item>
+              <tooltip-label slot="label" :title="$t('label.diskiopsreadrate')" :tooltip="apiParams.iopsreadrate.description"/>
+              <a-input
+                v-decorator="['diskiopsreadrate', { rules: [naturalNumberRule] }]"
+                :placeholder="apiParams.iopsreadrate.description"/>
+            </a-form-item>
+          </a-col>
+          <a-col :md="12" :lg="12">
+            <a-form-item>
+              <tooltip-label slot="label" :title="$t('label.diskiopswriterate')" :tooltip="apiParams.iopswriterate.description"/>
+              <a-input
+                v-decorator="['diskiopswriterate', { rules: [naturalNumberRule] }]"
+                :placeholder="apiParams.iopswriterate.description"/>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-form-item v-if="!isSystem && qosType === 'storage'">
+          <tooltip-label slot="label" :title="$t('label.iscustomizeddiskiops')" :tooltip="apiParams.customizediops.description"/>
+          <a-switch v-decorator="['iscustomizeddiskiops', {initialValue: isCustomizedDiskIops}]" :defaultChecked="isCustomizedDiskIops" @change="val => { isCustomizedDiskIops = val }" />
+        </a-form-item>
+        <a-row :gutter="12" v-if="qosType === 'storage' && !isCustomizedDiskIops">
+          <a-col :md="12" :lg="12">
+            <a-form-item>
+              <tooltip-label slot="label" :title="$t('label.diskiopsmin')" :tooltip="apiParams.miniops.description"/>
+              <a-input
+                v-decorator="['diskiopsmin', { rules: [naturalNumberRule] }]"
+                :placeholder="apiParams.miniops.description"/>
+            </a-form-item>
+          </a-col>
+          <a-col :md="12" :lg="12">
+            <a-form-item>
+              <tooltip-label slot="label" :title="$t('label.diskiopsmax')" :tooltip="apiParams.maxiops.description"/>
+              <a-input
+                v-decorator="['diskiopsmax', { rules: [naturalNumberRule] }]"
+                :placeholder="apiParams.maxiops.description"/>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-form-item v-if="!isSystem && qosType === 'storage'">
+          <tooltip-label slot="label" :title="$t('label.hypervisorsnapshotreserve')" :tooltip="apiParams.hypervisorsnapshotreserve.description"/>
           <a-input
-            v-decorator="['diskbytesreadrate', {
-              rules: [{
-                validator: (rule, value, callback) => {
-                  if (value && (isNaN(value) || value <= 0)) {
-                    callback(this.$t('message.error.number'))
-                  }
-                  callback()
-                }
-              }]
-            }]"
-            :placeholder="this.$t('label.diskbytesreadrate')"/>
+            v-decorator="['hypervisorsnapshotreserve', { rules: [naturalNumberRule] }]"
+            :placeholder="apiParams.hypervisorsnapshotreserve.description"/>
         </a-form-item>
-        <a-form-item v-if="this.qosType === 'hypervisor'">
-          <span slot="label">
-            {{ $t('label.diskbyteswriterate') }}
-            <a-tooltip :title="apiParams.byteswriterate.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
-          <a-input
-            v-decorator="['diskbyteswriterate', {
-              rules: [{
-                validator: (rule, value, callback) => {
-                  if (value && (isNaN(value) || value <= 0)) {
-                    callback(this.$t('message.error.number'))
-                  }
-                  callback()
-                }
-              }]
-            }]"
-            :placeholder="this.$t('label.diskbyteswriterate')"/>
-        </a-form-item>
-        <a-form-item v-if="this.qosType === 'hypervisor'">
-          <span slot="label">
-            {{ $t('label.diskiopsreadrate') }}
-            <a-tooltip :title="apiParams.iopsreadrate.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
-          <a-input
-            v-decorator="['diskiopsreadrate', {
-              rules: [{
-                validator: (rule, value, callback) => {
-                  if (value && (isNaN(value) || value <= 0)) {
-                    callback(this.$t('message.error.number'))
-                  }
-                  callback()
-                }
-              }]
-            }]"
-            :placeholder="this.$t('label.diskiopsreadrate')"/>
-        </a-form-item>
-        <a-form-item v-if="this.qosType === 'hypervisor'">
-          <span slot="label">
-            {{ $t('label.diskiopswriterate') }}
-            <a-tooltip :title="apiParams.iopswriterate.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
-          <a-input
-            v-decorator="['diskiopswriterate', {
-              rules: [{
-                validator: (rule, value, callback) => {
-                  if (value && (isNaN(value) || value <= 0)) {
-                    callback(this.$t('message.error.number'))
-                  }
-                  callback()
-                }
-              }]
-            }]"
-            :placeholder="this.$t('label.diskiopswriterate')"/>
-        </a-form-item>
-        <a-form-item v-if="!this.isSystem && this.qosType === 'storage'">
-          <span slot="label">
-            {{ $t('label.iscustomizeddiskiops') }}
-            <a-tooltip :title="apiParams.customizediops.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
-          <a-switch v-decorator="['iscustomizeddiskiops', {initialValue: this.isCustomizedDiskIops}]" :defaultChecked="this.isCustomizedDiskIops" @change="val => { this.isCustomizedDiskIops = val }" />
-        </a-form-item>
-        <a-form-item v-if="this.qosType === 'storage' && !this.isCustomizedDiskIops">
-          <span slot="label">
-            {{ $t('label.diskiopsmin') }}
-            <a-tooltip :title="apiParams.miniops.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
-          <a-input
-            v-decorator="['diskiopsmin', {
-              rules: [{
-                validator: (rule, value, callback) => {
-                  if (value && (isNaN(value) || value <= 0)) {
-                    callback(this.$t('message.error.number'))
-                  }
-                  callback()
-                }
-              }]
-            }]"
-            :placeholder="this.$t('label.diskiopsmin')"/>
-        </a-form-item>
-        <a-form-item v-if="this.qosType === 'storage' && !this.isCustomizedDiskIops">
-          <span slot="label">
-            {{ $t('label.diskiopsmax') }}
-            <a-tooltip :title="apiParams.maxiops.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
-          <a-input
-            v-decorator="['diskiopsmax', {
-              rules: [{
-                validator: (rule, value, callback) => {
-                  if (value && (isNaN(value) || value <= 0)) {
-                    callback(this.$t('message.error.number'))
-                  }
-                  callback()
-                }
-              }]
-            }]"
-            :placeholder="this.$t('label.diskiopsmax')"/>
-        </a-form-item>
-        <a-form-item v-if="!this.isSystem && this.qosType === 'storage'">
-          <span slot="label">
-            {{ $t('label.hypervisorsnapshotreserve') }}
-            <a-tooltip :title="apiParams.hypervisorsnapshotreserve.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
-          <a-input
-            v-decorator="['hypervisorsnapshotreserve', {
-              rules: [{
-                validator: (rule, value, callback) => {
-                  if (value && (isNaN(value) || value <= 0)) {
-                    callback(this.$t('message.error.number'))
-                  }
-                  callback()
-                }
-              }]
-            }]"
-            :placeholder="this.$t('label.hypervisorsnapshotreserve')"/>
-        </a-form-item>
-        <a-form-item>
-          <span slot="label">
-            {{ $t('label.offerha') }}
-            <a-tooltip :title="apiParams.offerha.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
-          <a-switch v-decorator="['offerha', {initialValue: false}]" />
-        </a-form-item>
-        <a-form-item>
-          <span slot="label">
-            {{ $t('label.dynamicscalingenabled') }}
-            <a-tooltip :title="apiParams.dynamicscalingenabled.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
-          <a-switch v-decorator="['dynamicscalingenabled', {initialValue: dynamicscalingenabled}]" :checked="dynamicscalingenabled" @change="val => { dynamicscalingenabled = val }"/>
-        </a-form-item>
-        <a-form-item v-if="this.isAdmin()">
-          <span slot="label">
-            {{ $t('label.hosttags') }}
-            <a-tooltip :title="apiParams.hosttags.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
-          <a-input
-            v-decorator="['hosttags', {}]"
-            :placeholder="this.$t('label.hosttags')"/>
-        </a-form-item>
-        <a-form-item v-if="this.isAdmin()">
-          <span slot="label">
-            {{ $t('label.storagetags') }}
-            <a-tooltip :title="apiParams.tags.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
-          <a-select
-            mode="tags"
-            v-decorator="['storagetags', {}]"
-            showSearch
-            optionFilterProp="children"
-            :filterOption="(input, option) => {
-              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
-            }"
-            :loading="storageTagLoading"
-            :placeholder="$t('label.storagetags')"
-            v-if="this.isAdmin()">
-            <a-select-option v-for="opt in storageTags" :key="opt">
-              {{ opt }}
-            </a-select-option>
-          </a-select>
-        </a-form-item>
-        <a-form-item>
-          <span slot="label">
-            {{ $t('label.limitcpuuse') }}
-            <a-tooltip :title="apiParams.limitcpuuse.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
-          <a-switch v-decorator="['limitcpuuse', {initialValue: false}]" />
-        </a-form-item>
-        <a-form-item v-if="!this.isSystem">
-          <span slot="label">
-            {{ $t('label.isvolatile') }}
-            <a-tooltip :title="apiParams.isvolatile.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
-          <a-switch v-decorator="['isvolatile', {initialValue: false}]" />
-        </a-form-item>
-        <a-form-item v-if="!this.isSystem && this.isAdmin()">
-          <span slot="label">
-            {{ $t('label.deploymentplanner') }}
-            <a-tooltip :title="apiParams.deploymentplanner.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+        <a-row :gutter="12">
+          <a-col :md="12" :lg="12">
+            <a-form-item>
+              <tooltip-label slot="label" :title="$t('label.offerha')" :tooltip="apiParams.offerha.description"/>
+              <a-switch v-decorator="['offerha', {initialValue: false}]" />
+            </a-form-item>
+          </a-col>
+          <a-col :md="12" :lg="12">
+            <a-form-item>
+              <tooltip-label slot="label" :title="$t('label.dynamicscalingenabled')" :tooltip="apiParams.dynamicscalingenabled.description"/>
+              <a-switch v-decorator="['dynamicscalingenabled', {initialValue: dynamicscalingenabled}]" :checked="dynamicscalingenabled" @change="val => { dynamicscalingenabled = val }"/>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="12">
+          <a-col :md="12" :lg="12">
+            <a-form-item v-if="isAdmin()">
+              <tooltip-label slot="label" :title="$t('label.hosttags')" :tooltip="apiParams.hosttags.description"/>
+              <a-input
+                v-decorator="['hosttags', {}]"
+                :placeholder="apiParams.hosttags.description"/>
+            </a-form-item>
+          </a-col>
+          <a-col :md="12" :lg="12">
+            <a-form-item v-if="isAdmin()">
+              <tooltip-label slot="label" :title="$t('label.storagetags')" :tooltip="apiParams.tags.description"/>
+              <a-select
+                mode="tags"
+                v-decorator="['storagetags', {}]"
+                showSearch
+                optionFilterProp="children"
+                :filterOption="(input, option) => {
+                  return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                }"
+                :loading="storageTagLoading"
+                :placeholder="apiParams.tags.description"
+                v-if="isAdmin()">
+                <a-select-option v-for="opt in storageTags" :key="opt">
+                  {{ opt }}
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="12">
+          <a-col :md="12" :lg="12">
+            <a-form-item>
+              <tooltip-label slot="label" :title="$t('label.limitcpuuse')" :tooltip="apiParams.limitcpuuse.description"/>
+              <a-switch v-decorator="['limitcpuuse', {initialValue: false}]" />
+            </a-form-item>
+          </a-col>
+          <a-col :md="12" :lg="12">
+            <a-form-item v-if="!isSystem">
+              <tooltip-label slot="label" :title="$t('label.isvolatile')" :tooltip="apiParams.isvolatile.description"/>
+              <a-switch v-decorator="['isvolatile', {initialValue: false}]" />
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-form-item v-if="!isSystem && isAdmin()">
+          <tooltip-label slot="label" :title="$t('label.deploymentplanner')" :tooltip="apiParams.deploymentplanner.description"/>
           <a-select
             v-decorator="['deploymentplanner', {
-              initialValue: this.deploymentPlanners.length > 0 ? this.deploymentPlanners[0].name : ''
+              initialValue: deploymentPlanners.length > 0 ? deploymentPlanners[0].name : ''
             }]"
             showSearch
             optionFilterProp="children"
@@ -610,20 +374,20 @@
               return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
             :loading="deploymentPlannerLoading"
-            :placeholder="this.$t('label.deploymentplanner')"
-            @change="val => { this.handleDeploymentPlannerChange(val) }">
-            <a-select-option v-for="(opt) in this.deploymentPlanners" :key="opt.name">
+            :placeholder="apiParams.deploymentplanner.description"
+            @change="val => { handleDeploymentPlannerChange(val) }">
+            <a-select-option v-for="(opt) in deploymentPlanners" :key="opt.name">
               {{ opt.name || opt.description }}
             </a-select-option>
           </a-select>
         </a-form-item>
-        <a-form-item :label="$t('label.plannermode')" v-if="this.plannerModeVisible">
+        <a-form-item :label="$t('label.plannermode')" v-if="plannerModeVisible">
           <a-radio-group
             v-decorator="['plannermode', {
-              initialValue: this.plannerMode
+              initialValue: plannerMode
             }]"
             buttonStyle="solid"
-            @change="selected => { this.handlePlannerModeChange(selected.target.value) }">
+            @change="selected => { handlePlannerModeChange(selected.target.value) }">
             <a-radio-button value="">
               {{ $t('label.none') }}
             </a-radio-button>
@@ -635,19 +399,19 @@
             </a-radio-button>
           </a-radio-group>
         </a-form-item>
-        <a-form-item :label="$t('label.gpu')" v-if="!this.isSystem">
+        <a-form-item :label="$t('label.gpu')" v-if="!isSystem">
           <a-radio-group
             v-decorator="['pcidevice', {
-              initialValue: this.selectedGpu
+              initialValue: selectedGpu
             }]"
             buttonStyle="solid"
-            @change="selected => { this.handleGpuChange(selected.target.value) }">
-            <a-radio-button v-for="(opt, optIndex) in this.gpuTypes" :key="optIndex" :value="opt.value">
+            @change="selected => { handleGpuChange(selected.target.value) }">
+            <a-radio-button v-for="(opt, optIndex) in gpuTypes" :key="optIndex" :value="opt.value">
               {{ opt.title }}
             </a-radio-button>
           </a-radio-group>
         </a-form-item>
-        <a-form-item :label="$t('label.vgputype')" v-if="this.vGpuVisible">
+        <a-form-item :label="$t('label.vgputype')" v-if="vGpuVisible">
           <a-select
             v-decorator="['vgputype', {}]"
             showSearch
@@ -655,22 +419,17 @@
             :filterOption="(input, option) => {
               return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
-            :placeholder="this.$t('label.vgputype')">
-            <a-select-option v-for="(opt, optIndex) in this.vGpuTypes" :key="optIndex">
+            :placeholder="$t('label.vgputype')">
+            <a-select-option v-for="(opt, optIndex) in vGpuTypes" :key="optIndex">
               {{ opt }}
             </a-select-option>
           </a-select>
         </a-form-item>
-        <a-form-item :label="$t('label.ispublic')" v-show="this.isAdmin()">
-          <a-switch v-decorator="['ispublic', {initialValue: this.isPublic}]" :checked="this.isPublic" @change="val => { this.isPublic = val }" />
+        <a-form-item :label="$t('label.ispublic')" v-show="isAdmin()">
+          <a-switch v-decorator="['ispublic', {initialValue: isPublic}]" :checked="isPublic" @change="val => { isPublic = val }" />
         </a-form-item>
-        <a-form-item v-if="!this.isPublic">
-          <span slot="label">
-            {{ $t('label.domain') }}
-            <a-tooltip :title="apiParams.domainid.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+        <a-form-item v-if="!isPublic">
+          <tooltip-label slot="label" :title="$t('label.domainid')" :tooltip="apiParams.domainid.description"/>
           <a-select
             mode="multiple"
             v-decorator="['domainid', {
@@ -687,19 +446,14 @@
               return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
             :loading="domainLoading"
-            :placeholder="this.$t('label.domainid')">
-            <a-select-option v-for="(opt, optIndex) in this.domains" :key="optIndex">
+            :placeholder="apiParams.domainid.description">
+            <a-select-option v-for="(opt, optIndex) in domains" :key="optIndex">
               {{ opt.path || opt.name || opt.description }}
             </a-select-option>
           </a-select>
         </a-form-item>
-        <a-form-item v-if="!this.isSystem">
-          <span slot="label">
-            {{ $t('label.zoneid') }}
-            <a-tooltip :title="apiParams.zoneid.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+        <a-form-item v-if="!isSystem">
+          <tooltip-label slot="label" :title="$t('label.zoneid')" :tooltip="apiParams.zoneid.description"/>
           <a-select
             id="zone-selection"
             mode="multiple"
@@ -708,7 +462,7 @@
                 {
                   validator: (rule, value, callback) => {
                     if (value && value.length > 1 && value.indexOf(0) !== -1) {
-                      callback(this.$t('message.error.zone.combined'))
+                      callback($t('message.error.zone.combined'))
                     }
                     callback()
                   }
@@ -722,31 +476,26 @@
             }"
             @select="val => fetchvSphereStoragePolicies(val)"
             :loading="zoneLoading"
-            :placeholder="this.$t('label.zoneid')">
-            <a-select-option v-for="(opt, optIndex) in this.zones" :key="optIndex">
+            :placeholder="apiParams.zoneid.description">
+            <a-select-option v-for="(opt, optIndex) in zones" :key="optIndex">
               {{ opt.name || opt.description }}
             </a-select-option>
           </a-select>
         </a-form-item>
         <a-form-item v-if="'listVsphereStoragePolicies' in $store.getters.apis && storagePolicies !== null">
-          <span slot="label">
-            {{ $t('label.vmware.storage.policy') }}
-            <a-tooltip :title="apiParams.storagetype.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.vmware.storage.polic')" :tooltip="apiParams.storagepolicy.description"/>
           <a-select
             v-decorator="['storagepolicy']"
             :placeholder="apiParams.storagepolicy.description">
-            <a-select-option v-for="policy in this.storagePolicies" :key="policy.id">
+            <a-select-option v-for="policy in storagePolicies" :key="policy.id">
               {{ policy.name || policy.id }}
             </a-select-option>
           </a-select>
         </a-form-item>
       </a-form>
       <div :span="24" class="action-button">
-        <a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
-        <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
+        <a-button @click="closeAction">{{ $t('label.cancel') }}</a-button>
+        <a-button :loading="loading" type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
       </div>
     </a-spin>
   </div>
@@ -754,16 +503,32 @@
 
 <script>
 import { api } from '@/api'
+import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'AddServiceOffering',
-  props: {
-  },
   components: {
+    TooltipLabel
   },
   data () {
     return {
       isSystem: false,
+      naturalNumberRule: {
+        validator: (rule, value, callback) => {
+          if (value && (isNaN(value) || value <= 0)) {
+            callback(this.$t('message.error.number'))
+          }
+          callback()
+        }
+      },
+      wholeNumberRule: {
+        validator: (rule, value, callback) => {
+          if (value && (isNaN(value) || value < 0)) {
+            callback(this.$t('message.error.number'))
+          }
+          callback()
+        }
+      },
       storageType: 'shared',
       provisioningType: 'thin',
       cacheMode: 'none',
@@ -1119,7 +884,7 @@ export default {
   .form-layout {
     width: 80vw;
     @media (min-width: 800px) {
-      width: 500px;
+      width: 700px;
     }
   }
 
diff --git a/ui/src/views/offering/AddDiskOffering.vue b/ui/src/views/offering/AddDiskOffering.vue
index 0b724b69a11..a2927f92dbf 100644
--- a/ui/src/views/offering/AddDiskOffering.vue
+++ b/ui/src/views/offering/AddDiskOffering.vue
@@ -23,45 +23,30 @@
         @submit="handleSubmit"
         layout="vertical">
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.name') }}
-            <a-tooltip :title="apiParams.name.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.name')" :tooltip="apiParams.name.description"/>
           <a-input
             autoFocus
             v-decorator="['name', {
               rules: [{ required: true, message: $t('message.error.required.input') }]
             }]"
-            :placeholder="this.$t('label.name')"/>
+            :placeholder="apiParams.name.description"/>
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.displaytext') }}
-            <a-tooltip :title="apiParams.displaytext.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.displaytext')" :tooltip="apiParams.displaytext.description"/>
           <a-input
             v-decorator="['displaytext', {
               rules: [{ required: true, message: $t('message.error.required.input') }]
             }]"
-            :placeholder="this.$t('label.displaytext')"/>
+            :placeholder="apiParams.displaytext.description"/>
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.storagetype') }}
-            <a-tooltip :title="apiParams.storagetype.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.storagetype')" :tooltip="apiParams.storagetype.description"/>
           <a-radio-group
             v-decorator="['storagetype', {
-              initialValue: this.storageType
+              initialValue: storageType
             }]"
             buttonStyle="solid"
-            @change="selected => { this.handleStorageTypeChange(selected.target.value) }">
+            @change="selected => { handleStorageTypeChange(selected.target.value) }">
             <a-radio-button value="shared">
               {{ $t('label.shared') }}
             </a-radio-button>
@@ -71,18 +56,13 @@
           </a-radio-group>
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.provisioningtype') }}
-            <a-tooltip :title="apiParams.provisioningtype.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.provisioningtype')" :tooltip="apiParams.provisioningtype.description"/>
           <a-radio-group
             v-decorator="['provisioningtype', {
-              initialValue: this.provisioningType
+              initialValue: provisioningType
             }]"
             buttonStyle="solid"
-            @change="selected => { this.handleProvisioningTypeChange(selected.target.value) }">
+            @change="selected => { handleProvisioningTypeChange(selected.target.value) }">
             <a-radio-button value="thin">
               {{ $t('label.provisioningtype.thin') }}
             </a-radio-button>
@@ -95,21 +75,11 @@
           </a-radio-group>
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.customdisksize') }}
-            <a-tooltip :title="apiParams.customized.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
-          <a-switch v-decorator="['customdisksize', { initialValue: this.isCustomDiskSize }]" :checked="this.isCustomDiskSize" @change="val => { this.isCustomDiskSize = val }" />
+          <tooltip-label slot="label" :title="$t('label.customdisksize')" :tooltip="apiParams.customized.description"/>
+          <a-switch v-decorator="['customdisksize', { initialValue: isCustomDiskSize }]" :checked="isCustomDiskSize" @change="val => { isCustomDiskSize = val }" />
         </a-form-item>
-        <a-form-item v-if="!this.isCustomDiskSize">
-          <span slot="label">
-            {{ $t('label.disksize') }}
-            <a-tooltip :title="apiParams.disksize.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+        <a-form-item v-if="!isCustomDiskSize">
+          <tooltip-label slot="label" :title="$t('label.disksize')" :tooltip="apiParams.disksize.description"/>
           <a-input
             v-decorator="['disksize', {
               rules: [
@@ -117,22 +87,22 @@
                 {
                   validator: (rule, value, callback) => {
                     if (value && (isNaN(value) || value <= 0)) {
-                      callback(this.$t('message.error.number'))
+                      callback($t('message.error.number'))
                     }
                     callback()
                   }
                 }
               ]
             }]"
-            :placeholder="this.$t('label.disksize')"/>
+            :placeholder="apiParams.disksize.description"/>
         </a-form-item>
         <a-form-item :label="$t('label.qostype')">
           <a-radio-group
             v-decorator="['qostype', {
-              initialValue: this.qosType
+              initialValue: qosType
             }]"
             buttonStyle="solid"
-            @change="selected => { this.handleQosTypeChange(selected.target.value) }">
+            @change="selected => { handleQosTypeChange(selected.target.value) }">
             <a-radio-button value="">
               {{ $t('label.none') }}
             </a-radio-button>
@@ -144,168 +114,123 @@
             </a-radio-button>
           </a-radio-group>
         </a-form-item>
-        <a-form-item v-if="this.qosType === 'hypervisor'">
-          <span slot="label">
-            {{ $t('label.diskbytesreadrate') }}
-            <a-tooltip :title="apiParams.bytesreadrate.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+        <a-form-item v-if="qosType === 'hypervisor'">
+          <tooltip-label slot="label" :title="$t('label.diskbytesreadrate')" :tooltip="apiParams.bytesreadrate.description"/>
           <a-input
             v-decorator="['diskbytesreadrate', {
               rules: [{
                 validator: (rule, value, callback) => {
                   if (value && (isNaN(value) || value <= 0)) {
-                    callback(this.$t('message.error.number'))
+                    callback($t('message.error.number'))
                   }
                   callback()
                 }
               }]
             }]"
-            :placeholder="this.$t('label.diskbytesreadrate')"/>
+            :placeholder="apiParams.bytesreadrate.description"/>
         </a-form-item>
-        <a-form-item v-if="this.qosType === 'hypervisor'">
-          <span slot="label">
-            {{ $t('label.diskbyteswriterate') }}
-            <a-tooltip :title="apiParams.byteswriterate.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+        <a-form-item v-if="qosType === 'hypervisor'">
+          <tooltip-label slot="label" :title="$t('label.diskbyteswriterate')" :tooltip="apiParams.byteswriterate.description"/>
           <a-input
             v-decorator="['diskbyteswriterate', {
               rules: [{
                 validator: (rule, value, callback) => {
                   if (value && (isNaN(value) || value <= 0)) {
-                    callback(this.$t('message.error.number'))
+                    callback($t('message.error.number'))
                   }
                   callback()
                 }
               }]
             }]"
-            :placeholder="this.$t('label.diskbyteswriterate')"/>
+            :placeholder="apiParams.byteswriterate.description"/>
         </a-form-item>
-        <a-form-item v-if="this.qosType === 'hypervisor'">
-          <span slot="label">
-            {{ $t('label.diskiopsreadrate') }}
-            <a-tooltip :title="apiParams.iopsreadrate.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+        <a-form-item v-if="qosType === 'hypervisor'">
+          <tooltip-label slot="label" :title="$t('label.diskiopsreadrate')" :tooltip="apiParams.iopsreadrate.description"/>
           <a-input
             v-decorator="['diskiopsreadrate', {
               rules: [{
                 validator: (rule, value, callback) => {
                   if (value && (isNaN(value) || value <= 0)) {
-                    callback(this.$t('message.error.number'))
+                    callback($t('message.error.number'))
                   }
                   callback()
                 }
               }]
             }]"
-            :placeholder="this.$t('label.diskiopsreadrate')"/>
+            :placeholder="apiParams.iopsreadrate.description"/>
         </a-form-item>
-        <a-form-item v-if="this.qosType === 'hypervisor'">
-          <span slot="label">
-            {{ $t('label.diskiopswriterate') }}
-            <a-tooltip :title="apiParams.iopswriterate.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+        <a-form-item v-if="qosType === 'hypervisor'">
+          <tooltip-label slot="label" :title="$t('label.diskiopswriterate')" :tooltip="apiParams.iopswriterate.description"/>
           <a-input
             v-decorator="['diskiopswriterate', {
               rules: [{
                 validator: (rule, value, callback) => {
                   if (value && (isNaN(value) || value <= 0)) {
-                    callback(this.$t('message.error.number'))
+                    callback($t('message.error.number'))
                   }
                   callback()
                 }
               }]
             }]"
-            :placeholder="this.$t('label.diskiopswriterate')"/>
+            :placeholder="apiParams.iopswriterate.description"/>
         </a-form-item>
-        <a-form-item v-if="this.qosType === 'storage'">
-          <span slot="label">
-            {{ $t('label.iscustomizeddiskiops') }}
-            <a-tooltip :title="apiParams.customizediops.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
-          <a-switch v-decorator="['iscustomizeddiskiops']" :checked="this.isCustomizedDiskIops" @change="val => { this.isCustomizedDiskIops = val }" />
+        <a-form-item v-if="qosType === 'storage'">
+          <tooltip-label slot="label" :title="$t('label.iscustomizeddiskiops')" :tooltip="apiParams.customizediops.description"/>
+          <a-switch v-decorator="['iscustomizeddiskiops']" :checked="isCustomizedDiskIops" @change="val => { isCustomizedDiskIops = val }" />
         </a-form-item>
-        <a-form-item v-if="this.qosType === 'storage' && !this.isCustomizedDiskIops">
-          <span slot="label">
-            {{ $t('label.diskiopsmin') }}
-            <a-tooltip :title="apiParams.miniops.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+        <a-form-item v-if="qosType === 'storage' && !isCustomizedDiskIops">
+          <tooltip-label slot="label" :title="$t('label.diskiopsmin')" :tooltip="apiParams.miniops.description"/>
           <a-input
             v-decorator="['diskiopsmin', {
               rules: [{
                 validator: (rule, value, callback) => {
                   if (value && (isNaN(value) || value <= 0)) {
-                    callback(this.$t('message.error.number'))
+                    callback($t('message.error.number'))
                   }
                   callback()
                 }
               }]
             }]"
-            :placeholder="this.$t('label.diskiopsmin')"/>
+            :placeholder="apiParams.miniops.description"/>
         </a-form-item>
-        <a-form-item v-if="this.qosType === 'storage' && !this.isCustomizedDiskIops">
-          <span slot="label">
-            {{ $t('label.diskiopsmax') }}
-            <a-tooltip :title="apiParams.maxiops.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+        <a-form-item v-if="qosType === 'storage' && !isCustomizedDiskIops">
+          <tooltip-label slot="label" :title="$t('label.diskiopsmax')" :tooltip="apiParams.maxiops.description"/>
           <a-input
             v-decorator="['diskiopsmax', {
               rules: [{
                 validator: (rule, value, callback) => {
                   if (value && (isNaN(value) || value <= 0)) {
-                    callback(this.$t('message.error.number'))
+                    callback($t('message.error.number'))
                   }
                   callback()
                 }
               }]
             }]"
-            :placeholder="this.$t('label.diskiopsmax')"/>
+            :placeholder="apiParams.maxiops.description"/>
         </a-form-item>
-        <a-form-item v-if="this.qosType === 'storage'">
-          <span slot="label">
-            {{ $t('label.hypervisorsnapshotreserve') }}
-            <a-tooltip :title="apiParams.hypervisorsnapshotreserve.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+        <a-form-item v-if="qosType === 'storage'">
+          <tooltip-label slot="label" :title="$t('label.hypervisorsnapshotreserve')" :tooltip="apiParams.hypervisorsnapshotreserve.description"/>
           <a-input
             v-decorator="['hypervisorsnapshotreserve', {
               rules: [{
                 validator: (rule, value, callback) => {
                   if (value && (isNaN(value) || value <= 0)) {
-                    callback(this.$t('message.error.number'))
+                    callback($t('message.error.number'))
                   }
                   callback()
                 }
               }]
             }]"
-            :placeholder="this.$t('label.hypervisorsnapshotreserve')"/>
+            :placeholder="apiParams.hypervisorsnapshotreserve.description"/>
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.writecachetype') }}
-            <a-tooltip :title="apiParams.cachemode.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.writecachetype')" :tooltip="apiParams.cachemode.description"/>
           <a-radio-group
             v-decorator="['writecachetype', {
-              initialValue: this.writeCacheType
+              initialValue: writeCacheType
             }]"
             buttonStyle="solid"
-            @change="selected => { this.handleWriteCacheTypeChange(selected.target.value) }">
+            @change="selected => { handleWriteCacheTypeChange(selected.target.value) }">
             <a-radio-button value="none">
               {{ $t('label.nodiskcache') }}
             </a-radio-button>
@@ -317,13 +242,8 @@
             </a-radio-button>
           </a-radio-group>
         </a-form-item>
-        <a-form-item v-if="this.isAdmin()">
-          <span slot="label">
-            {{ $t('label.storagetags') }}
-            <a-tooltip :title="apiParams.tags.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+        <a-form-item v-if="isAdmin()">
+          <tooltip-label slot="label" :title="$t('label.storagetags')" :tooltip="apiParams.tags.description"/>
           <a-select
             mode="tags"
             v-decorator="['tags', {}]"
@@ -333,23 +253,18 @@
               return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
             :loading="storageTagLoading"
-            :placeholder="this.$t('label.tags')"
-            v-if="this.isAdmin()">
-            <a-select-option v-for="(opt) in this.storageTags" :key="opt">
+            :placeholder="apiParams.tags.description"
+            v-if="isAdmin()">
+            <a-select-option v-for="(opt) in storageTags" :key="opt">
               {{ opt }}
             </a-select-option>
           </a-select>
         </a-form-item>
-        <a-form-item :label="$t('label.ispublic')" v-show="this.isAdmin()">
-          <a-switch v-decorator="['ispublic', {initialValue: this.isPublic}]" :checked="this.isPublic" @change="val => { this.isPublic = val }" />
+        <a-form-item :label="$t('label.ispublic')" v-show="isAdmin()">
+          <a-switch v-decorator="['ispublic', {initialValue: isPublic}]" :checked="isPublic" @change="val => { isPublic = val }" />
         </a-form-item>
-        <a-form-item v-if="!this.isPublic">
-          <span slot="label">
-            {{ $t('label.domainid') }}
-            <a-tooltip :title="apiParams.domainid.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+        <a-form-item v-if="!isPublic">
+          <tooltip-label slot="label" :title="$t('label.domainid')" :tooltip="apiParams.domainid.description"/>
           <a-select
             mode="multiple"
             v-decorator="['domainid', {
@@ -366,19 +281,14 @@
               return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
             :loading="domainLoading"
-            :placeholder="this.$t('label.domainid')">
-            <a-select-option v-for="(opt, optIndex) in this.domains" :key="optIndex">
+            :placeholder="apiParams.domainid.description">
+            <a-select-option v-for="(opt, optIndex) in domains" :key="optIndex">
               {{ opt.path || opt.name || opt.description }}
             </a-select-option>
           </a-select>
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.zoneid') }}
-            <a-tooltip :title="apiParams.zoneid.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.zoneid')" :tooltip="apiParams.zoneid.description"/>
           <a-select
             id="zone-selection"
             mode="multiple"
@@ -387,7 +297,7 @@
                 {
                   validator: (rule, value, callback) => {
                     if (value && value.length > 1 && value.indexOf(0) !== -1) {
-                      callback(this.$t('message.error.zone.combined'))
+                      callback($t('message.error.zone.combined'))
                     }
                     callback()
                   }
@@ -401,31 +311,26 @@
             }"
             @select="val => fetchvSphereStoragePolicies(val)"
             :loading="zoneLoading"
-            :placeholder="this.$t('label.zoneid')">
-            <a-select-option v-for="(opt, optIndex) in this.zones" :key="optIndex">
+            :placeholder="apiParams.zoneid.description">
+            <a-select-option v-for="(opt, optIndex) in zones" :key="optIndex">
               {{ opt.name || opt.description }}
             </a-select-option>
           </a-select>
         </a-form-item>
         <a-form-item v-if="'listVsphereStoragePolicies' in $store.getters.apis && storagePolicies !== null">
-          <span slot="label">
-            {{ $t('label.vmware.storage.policy') }}
-            <a-tooltip :title="apiParams.storagetype.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.vmware.storage.policy')" :tooltip="apiParams.storagepolicy.description"/>
           <a-select
             v-decorator="['storagepolicy']"
             :placeholder="apiParams.storagepolicy.description">
-            <a-select-option v-for="policy in this.storagePolicies" :key="policy.id">
+            <a-select-option v-for="policy in storagePolicies" :key="policy.id">
               {{ policy.name || policy.id }}
             </a-select-option>
           </a-select>
         </a-form-item>
       </a-form>
       <div :span="24" class="action-button">
-        <a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
-        <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
+        <a-button @click="closeAction">{{ $t('label.cancel') }}</a-button>
+        <a-button :loading="loading" type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
       </div>
     </a-spin>
   </div>
@@ -433,16 +338,12 @@
 
 <script>
 import { api } from '@/api'
+import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'AddDiskOffering',
-  props: {
-    resource: {
-      type: Object,
-      required: true
-    }
-  },
   components: {
+    TooltipLabel
   },
   data () {
     return {
diff --git a/ui/src/views/offering/AddNetworkOffering.vue b/ui/src/views/offering/AddNetworkOffering.vue
index 910bc2bb8ab..a8253637564 100644
--- a/ui/src/views/offering/AddNetworkOffering.vue
+++ b/ui/src/views/offering/AddNetworkOffering.vue
@@ -23,65 +23,45 @@
         @submit="handleSubmit"
         layout="vertical">
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.name') }}
-            <a-tooltip :title="apiParams.name.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.name')" :tooltip="apiParams.name.description"/>
           <a-input
             autoFocus
             v-decorator="['name', {
               rules: [{ required: true, message: $t('message.error.name') }]
             }]"
-            :placeholder="this.$t('label.name')"/>
+            :placeholder="apiParams.name.description"/>
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.displaytext') }}
-            <a-tooltip :title="apiParams.displaytext.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.displaytext')" :tooltip="apiParams.displaytext.description"/>
           <a-input
             v-decorator="['displaytext', {
               rules: [{ required: true, message: $t('message.error.description') }]
             }]"
-            :placeholder="this.$t('label.displaytext')"/>
+            :placeholder="apiParams.displaytext.description"/>
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.networkrate') }}
-            <a-tooltip :title="apiParams.networkrate.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.networkrate')" :tooltip="apiParams.networkrate.description"/>
           <a-input
             v-decorator="['networkrate', {
               rules: [{
                 validator: (rule, value, callback) => {
                   if (value && (isNaN(value) || value <= 0)) {
-                    callback(this.$t('message.validate.number'))
+                    callback($t('message.validate.number'))
                   }
                   callback()
                 }
               }]
             }]"
-            :placeholder="this.$t('label.networkrate')"/>
+            :placeholder="apiParams.networkrate.description"/>
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.guestiptype') }}
-            <a-tooltip :title="apiParams.guestiptype.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.guestiptype')" :tooltip="apiParams.guestiptype.description"/>
           <a-radio-group
             v-decorator="['guestiptype', {
-              initialValue: this.guestType
+              initialValue: guestType
             }]"
             buttonStyle="solid"
-            @change="selected => { this.handleGuestTypeChange(selected.target.value) }">
+            @change="selected => { handleGuestTypeChange(selected.target.value) }">
             <a-radio-button value="isolated">
               {{ $t('label.isolated') }}
             </a-radio-button>
@@ -93,37 +73,28 @@
             </a-radio-button>
           </a-radio-group>
         </a-form-item>
-        <a-form-item v-if="this.guestType !== 'shared'">
-          <span slot="label">
-            {{ $t('label.ispersistent') }}
-            <a-tooltip :title="apiParams.ispersistent.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
-          <a-switch v-decorator="['ispersistent', {initialValue: false}]" />
+        <a-row :gutter="12" v-if="guestType !== 'shared'">
+          <a-col :md="12" :lg="12">
+            <a-form-item>
+              <tooltip-label slot="label" :title="$t('label.ispersistent')" :tooltip="apiParams.ispersistent.description"/>
+              <a-switch v-decorator="['ispersistent', {initialValue: false}]" />
+            </a-form-item>
+          </a-col>
+          <a-col :md="12" :lg="12">
+            <a-form-item>
+              <tooltip-label slot="label" :title="$t('label.specifyvlan')" :tooltip="apiParams.specifyvlan.description"/>
+              <a-switch v-decorator="['specifyvlan', {initialValue: true}]" :defaultChecked="true" />
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-form-item v-if="guestType === 'isolated'">
+          <tooltip-label slot="label" :title="$t('label.vpc')" :tooltip="apiParams.forvpc.description"/>
+          <a-switch v-decorator="['forvpc', {initialValue: forVpc}]" :defaultChecked="forVpc" @change="val => { handleForVpcChange(val) }" />
         </a-form-item>
-        <a-form-item v-if="this.guestType !== 'shared'">
-          <span slot="label">
-            {{ $t('label.specifyvlan') }}
-            <a-tooltip :title="apiParams.specifyvlan.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
-          <a-switch v-decorator="['specifyvlan', {initialValue: true}]" :defaultChecked="true" />
-        </a-form-item>
-        <a-form-item v-if="this.guestType === 'isolated'">
-          <span slot="label">
-            {{ $t('label.vpc') }}
-            <a-tooltip :title="apiParams.forvpc.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
-          <a-switch v-decorator="['forvpc', {initialValue: this.forVpc}]" :defaultChecked="this.forVpc" @change="val => { this.handleForVpcChange(val) }" />
-        </a-form-item>
-        <a-form-item :label="$t('label.userdatal2')" v-if="this.guestType === 'l2'">
+        <a-form-item :label="$t('label.userdatal2')" v-if="guestType === 'l2'">
           <a-switch v-decorator="['userdatal2', {initialValue: false}]" />
         </a-form-item>
-        <a-form-item :label="$t('label.lbtype')" v-if="this.forVpc && this.lbServiceChecked">
+        <a-form-item :label="$t('label.lbtype')" v-if="forVpc && lbServiceChecked">
           <a-radio-group
             v-decorator="[' ', {
               initialValue: 'publicLb'
@@ -140,10 +111,10 @@
         <a-form-item :label="$t('label.promiscuousmode')">
           <a-radio-group
             v-decorator="['promiscuousmode', {
-              initialValue: this.promiscuousMode
+              initialValue: promiscuousMode
             }]"
             buttonStyle="solid"
-            @change="selected => { this.handlePromiscuousModeChange(selected.target.value) }">
+            @change="selected => { handlePromiscuousModeChange(selected.target.value) }">
             <a-radio-button value="">
               {{ $t('label.none') }}
             </a-radio-button>
@@ -158,10 +129,10 @@
         <a-form-item :label="$t('label.macaddresschanges')">
           <a-radio-group
             v-decorator="['macaddresschanges', {
-              initialValue: this.macAddressChanges
+              initialValue: macAddressChanges
             }]"
             buttonStyle="solid"
-            @change="selected => { this.handleMacAddressChangesChange(selected.target.value) }">
+            @change="selected => { handleMacAddressChangesChange(selected.target.value) }">
             <a-radio-button value="">
               {{ $t('label.none') }}
             </a-radio-button>
@@ -176,10 +147,10 @@
         <a-form-item :label="$t('label.forgedtransmits')">
           <a-radio-group
             v-decorator="['forgedtransmits', {
-              initialValue: this.forgedTransmits
+              initialValue: forgedTransmits
             }]"
             buttonStyle="solid"
-            @change="selected => { this.handleForgedTransmitsChange(selected.target.value) }">
+            @change="selected => { handleForgedTransmitsChange(selected.target.value) }">
             <a-radio-button value="">
               {{ $t('label.none') }}
             </a-radio-button>
@@ -191,15 +162,10 @@
             </a-radio-button>
           </a-radio-group>
         </a-form-item>
-        <a-form-item v-if="this.guestType !== 'l2'">
-          <span slot="label">
-            {{ $t('label.supportedservices') }}
-            <a-tooltip :title="apiParams.supportedservices.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+        <a-form-item v-if="guestType !== 'l2'">
+          <tooltip-label slot="label" :title="$t('label.supportedservices')" :tooltip="apiParams.supportedservices.description"/>
           <div class="supported-services-container" scroll-to="last-child">
-            <a-list itemLayout="horizontal" :dataSource="this.supportedServices">
+            <a-list itemLayout="horizontal" :dataSource="supportedServices">
               <a-list-item slot="renderItem" slot-scope="item">
                 <CheckBoxSelectPair
                   v-decorator="['service.'+item.name, {}]"
@@ -213,22 +179,17 @@
             </a-list>
           </div>
         </a-form-item>
-        <a-form-item v-if="this.isVirtualRouterForAtLeastOneService">
-          <span slot="label">
-            {{ $t('label.serviceofferingid') }}
-            <a-tooltip :title="apiParams.serviceofferingid.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+        <a-form-item v-if="isVirtualRouterForAtLeastOneService">
+          <tooltip-label slot="label" :title="$t('label.serviceofferingid')" :tooltip="apiParams.serviceofferingid.description"/>
           <a-select
             v-decorator="['serviceofferingid', {
               rules: [
                 {
                   required: true,
-                  message: `${this.$t('message.error.select')}`
+                  message: $t('message.error.select')
                 }
               ],
-              initialValue: this.serviceOfferings.length > 0 ? this.serviceOfferings[0].id : ''
+              initialValue: serviceOfferings.length > 0 ? serviceOfferings[0].id : ''
             }]"
             showSearch
             optionFilterProp="children"
@@ -236,16 +197,16 @@
               return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
             :loading="serviceOfferingLoading"
-            :placeholder="this.$t('label.serviceofferingid')">
-            <a-select-option v-for="(opt) in this.serviceOfferings" :key="opt.id">
+            :placeholder="apiParams.serviceofferingid.description">
+            <a-select-option v-for="(opt) in serviceOfferings" :key="opt.id">
               {{ opt.name || opt.description }}
             </a-select-option>
           </a-select>
         </a-form-item>
-        <a-form-item :label="$t('label.redundantrouter')" v-if="(this.guestType === 'shared' || this.guestType === 'isolated') && this.sourceNatServiceChecked && !this.isVpcVirtualRouterForAtLeastOneService">
+        <a-form-item :label="$t('label.redundantrouter')" v-if="(guestType === 'shared' || guestType === 'isolated') && sourceNatServiceChecked && !isVpcVirtualRouterForAtLeastOneService">
           <a-switch v-decorator="['redundantroutercapability', {initialValue: false}]" />
         </a-form-item>
-        <a-form-item :label="$t('label.sourcenattype')" v-if="(this.guestType === 'shared' || this.guestType === 'isolated') && this.sourceNatServiceChecked">
+        <a-form-item :label="$t('label.sourcenattype')" v-if="(guestType === 'shared' || guestType === 'isolated') && sourceNatServiceChecked">
           <a-radio-group
             v-decorator="['sourcenattype', {
               initialValue: 'peraccount'
@@ -259,10 +220,10 @@
             </a-radio-button>
           </a-radio-group>
         </a-form-item>
-        <a-form-item :label="$t('label.service.lb.elasticlbcheckbox')" v-if="this.guestType == 'shared' && this.lbServiceChecked && this.lbServiceProvider === 'Netscaler'">
+        <a-form-item :label="$t('label.service.lb.elasticlbcheckbox')" v-if="guestType == 'shared' && lbServiceChecked && lbServiceProvider === 'Netscaler'">
           <a-switch v-decorator="['elasticlb', {initialValue: false}]" />
         </a-form-item>
-        <a-form-item :label="$t('label.service.lb.inlinemodedropdown')" v-if="(this.guestType === 'shared' || this.guestType === 'isolated') && this.lbServiceChecked && this.firewallServiceChecked && this.lbServiceProvider === 'F5BigIp' && this.firewallServiceProvider === 'JuniperSRX'">
+        <a-form-item :label="$t('label.service.lb.inlinemodedropdown')" v-if="(guestType === 'shared' || guestType === 'isolated') && lbServiceChecked && firewallServiceChecked && lbServiceProvider === 'F5BigIp' && firewallServiceProvider === 'JuniperSRX'">
           <a-radio-group
             v-decorator="['inlinemode', {
               initialValue: 'false'
@@ -276,7 +237,7 @@
             </a-radio-button>
           </a-radio-group>
         </a-form-item>
-        <a-form-item :label="$t('label.service.lb.netscaler.servicepackages')" v-if="(this.guestType === 'shared' || this.guestType === 'isolated') && this.lbServiceChecked && this.lbServiceProvider === 'Netscaler'">
+        <a-form-item :label="$t('label.service.lb.netscaler.servicepackages')" v-if="(guestType === 'shared' || guestType === 'isolated') && lbServiceChecked && lbServiceProvider === 'Netscaler'">
           <a-select
             v-decorator="['netscalerservicepackages', {}]"
             showSearch
@@ -285,18 +246,18 @@
               return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
             :loading="registeredServicePackageLoading"
-            :placeholder="this.$t('label.service.lb.netscaler.servicepackages')">
-            <a-select-option v-for="(opt, optIndex) in this.registeredServicePackages" :key="optIndex">
+            :placeholder="$t('label.service.lb.netscaler.servicepackages')">
+            <a-select-option v-for="(opt, optIndex) in registeredServicePackages" :key="optIndex">
               {{ opt.name || opt.description }}
             </a-select-option>
           </a-select>
         </a-form-item>
-        <a-form-item :label="$t('label.service.lb.netscaler.servicepackages.description')" v-if="(this.guestType === 'shared' || this.guestType === 'isolated') && this.lbServiceChecked && this.lbServiceProvider === 'Netscaler'">
+        <a-form-item :label="$t('label.service.lb.netscaler.servicepackages.description')" v-if="(guestType === 'shared' || guestType === 'isolated') && lbServiceChecked && lbServiceProvider === 'Netscaler'">
           <a-input
             v-decorator="['netscalerservicepackagesdescription', {}]"
-            :placeholder="this.$t('label.service.lb.netscaler.servicepackages.description')"/>
+            :placeholder="$t('label.service.lb.netscaler.servicepackages.description')"/>
         </a-form-item>
-        <a-form-item :label="$t('label.service.lb.lbisolationdropdown')" v-show="false">
+        <a-form-item :title="$t('label.service.lb.lbisolationdropdown')" v-show="false">
           <a-radio-group
             v-decorator="['isolation', {
               initialValue: 'dedicated'
@@ -310,45 +271,30 @@
             </a-radio-button>
           </a-radio-group>
         </a-form-item>
-        <a-form-item :label="$t('label.service.staticnat.elasticipcheckbox')" v-if="this.guestType == 'shared' && this.staticNatServiceChecked && this.staticNatServiceProvider === 'Netscaler'">
-          <a-switch v-decorator="['elasticip', {initialValue: this.isElasticIp}]" :defaultChecked="this.isElasticIp" @change="val => { this.isElasticIp = val }" />
+        <a-form-item :label="$t('label.service.staticnat.elasticipcheckbox')" v-if="guestType == 'shared' && staticNatServiceChecked && staticNatServiceProvider === 'Netscaler'">
+          <a-switch v-decorator="['elasticip', {initialValue: isElasticIp}]" :defaultChecked="isElasticIp" @change="val => { isElasticIp = val }" />
         </a-form-item>
-        <a-form-item :label="$t('label.service.staticnat.associatepublicip')" v-if="this.isElasticIp && this.staticNatServiceChecked && this.staticNatServiceProvider === 'Netscaler'">
+        <a-form-item :label="$t('label.service.staticnat.associatepublicip')" v-if="isElasticIp && staticNatServiceChecked && staticNatServiceProvider === 'Netscaler'">
           <a-switch v-decorator="['associatepublicip', {initialValue: false}]" />
         </a-form-item>
-        <a-form-item :label="$t('label.supportsstrechedl2subnet')" v-if="this.connectivityServiceChecked">
+        <a-form-item :label="$t('label.supportsstrechedl2subnet')" v-if="connectivityServiceChecked">
           <a-switch v-decorator="['supportsstrechedl2subnet', {initialValue: false}]" />
         </a-form-item>
         <a-form-item :label="$t('label.supportspublicaccess')" v-show="false">
           <a-switch v-decorator="['supportspublicaccess', {initialValue: false}]" />
         </a-form-item>
-        <a-form-item v-if="(this.guestType === 'shared' || this.guestType === 'isolated') && !this.isVpcVirtualRouterForAtLeastOneService">
-          <span slot="label">
-            {{ $t('label.conservemode') }}
-            <a-tooltip :title="apiParams.conservemode.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+        <a-form-item v-if="(guestType === 'shared' || guestType === 'isolated') && !isVpcVirtualRouterForAtLeastOneService">
+          <tooltip-label slot="label" :title="$t('label.conservemode')" :tooltip="apiParams.conservemode.description"/>
           <a-switch v-decorator="['conservemode', {initialValue: true}]" :defaultChecked="true" />
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.tags') }}
-            <a-tooltip :title="apiParams.tags.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.tags')" :tooltip="apiParams.tags.description"/>
           <a-input
             v-decorator="['tags', {}]"
-            :placeholder="this.$t('label.tags')"/>
+            :placeholder="apiParams.tags.description"/>
         </a-form-item>
-        <a-form-item v-if="this.requiredNetworkOfferingExists && this.guestType === 'isolated' && this.sourceNatServiceChecked">
-          <span slot="label">
-            {{ $t('label.availability') }}
-            <a-tooltip :title="apiParams.availability.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+        <a-form-item v-if="requiredNetworkOfferingExists && guestType === 'isolated' && sourceNatServiceChecked">
+          <tooltip-label slot="label" :title="$t('label.availability')" :tooltip="apiParams.availability.description"/>
           <a-radio-group
             v-decorator="['availability', {
               initialValue: 'optional'
@@ -362,13 +308,8 @@
             </a-radio-button>
           </a-radio-group>
         </a-form-item>
-        <a-form-item v-if="this.firewallServiceChecked">
-          <span slot="label">
-            {{ $t('label.egressdefaultpolicy') }}
-            <a-tooltip :title="apiParams.egressdefaultpolicy.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+        <a-form-item v-if="firewallServiceChecked">
+          <tooltip-label slot="label" :title="$t('label.egressdefaultpolicy')" :tooltip="apiParams.egressdefaultpolicy.description"/>
           <a-radio-group
             v-decorator="['egressdefaultpolicy', {
               initialValue: 'allow'
@@ -382,23 +323,18 @@
             </a-radio-button>
           </a-radio-group>
         </a-form-item>
-        <a-form-item :label="$t('label.ispublic')" v-show="this.isAdmin()">
-          <a-switch v-decorator="['ispublic', {initialValue: this.isPublic}]" :defaultChecked="this.isPublic" @change="val => { this.isPublic = val }" />
+        <a-form-item :label="$t('label.ispublic')" v-show="isAdmin()">
+          <a-switch v-decorator="['ispublic', {initialValue: isPublic}]" :defaultChecked="isPublic" @change="val => { isPublic = val }" />
         </a-form-item>
-        <a-form-item v-if="!this.isPublic">
-          <span slot="label">
-            {{ $t('label.domainid') }}
-            <a-tooltip :title="apiParams.domainid.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+        <a-form-item v-if="!isPublic">
+          <tooltip-label slot="label" :title="$t('label.domainid')" :tooltip="apiParams.domainid.description"/>
           <a-select
             mode="multiple"
             v-decorator="['domainid', {
               rules: [
                 {
                   required: true,
-                  message: `${this.$t('message.error.select')}`
+                  message: $t('message.error.select')
                 }
               ]
             }]"
@@ -408,19 +344,14 @@
               return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
             :loading="domainLoading"
-            :placeholder="this.$t('label.domain')">
-            <a-select-option v-for="(opt, optIndex) in this.domains" :key="optIndex">
+            :placeholder="apiParams.domainid.description">
+            <a-select-option v-for="(opt, optIndex) in domains" :key="optIndex">
               {{ opt.path || opt.name || opt.description }}
             </a-select-option>
           </a-select>
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.zoneid') }}
-            <a-tooltip :title="apiParams.zoneid.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.zoneid')" :tooltip="apiParams.zoneid.description"/>
           <a-select
             id="zone-selection"
             mode="multiple"
@@ -442,25 +373,20 @@
               return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
             :loading="zoneLoading"
-            :placeholder="this.$t('label.zone')">
-            <a-select-option v-for="(opt, optIndex) in this.zones" :key="optIndex">
+            :placeholder="apiParams.zoneid.description">
+            <a-select-option v-for="(opt, optIndex) in zones" :key="optIndex">
               {{ opt.name || opt.description }}
             </a-select-option>
           </a-select>
         </a-form-item>
         <a-form-item v-if="apiParams.enable">
-          <span slot="label">
-            {{ $t('label.enable.network.offering') }}
-            <a-tooltip :title="apiParams.enable.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.enable.network.offering')" :tooltip="apiParams.enable.description"/>
           <a-switch v-decorator="['enable', {initialValue: false}]" />
         </a-form-item>
       </a-form>
       <div :span="24" class="action-button">
-        <a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
-        <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
+        <a-button @click="closeAction">{{ $t('label.cancel') }}</a-button>
+        <a-button :loading="loading" type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
       </div>
     </a-spin>
   </div>
@@ -469,11 +395,13 @@
 <script>
 import { api } from '@/api'
 import CheckBoxSelectPair from '@/components/CheckBoxSelectPair'
+import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'AddNetworkOffering',
   components: {
-    CheckBoxSelectPair
+    CheckBoxSelectPair,
+    TooltipLabel
   },
   data () {
     return {
@@ -964,7 +892,7 @@ export default {
     width: 80vw;
 
     @media (min-width: 800px) {
-      width: 500px;
+      width: 600px;
     }
   }
   .supported-services-container {
diff --git a/ui/src/views/offering/AddVpcOffering.vue b/ui/src/views/offering/AddVpcOffering.vue
index cbe2db18cad..57eeff8130d 100644
--- a/ui/src/views/offering/AddVpcOffering.vue
+++ b/ui/src/views/offering/AddVpcOffering.vue
@@ -23,41 +23,26 @@
         @submit="handleSubmit"
         layout="vertical">
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.name') }}
-            <a-tooltip :title="apiParams.name.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.name')" :tooltip="apiParams.name.description"/>
           <a-input
             autoFocus
             v-decorator="['name', {
               rules: [{ required: true, message: $t('message.error.name') }]
             }]"
-            :placeholder="this.$t('label.name')"/>
+            :placeholder="apiParams.name.description"/>
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.displaytext') }}
-            <a-tooltip :title="apiParams.displaytext.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.displaytext')" :tooltip="apiParams.displaytext.description"/>
           <a-input
             v-decorator="['displaytext', {
               rules: [{ required: true, message: $t('message.error.description') }]
             }]"
-            :placeholder="this.$t('label.displaytext')"/>
+            :placeholder="apiParams.displaytext.description"/>
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.supportedservices') }}
-            <a-tooltip :title="apiParams.supportedservices.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.supportedservices')" :tooltip="apiParams.supportedservices.description"/>
           <div class="supported-services-container" scroll-to="last-child">
-            <a-list itemLayout="horizontal" :dataSource="this.supportedServices">
+            <a-list itemLayout="horizontal" :dataSource="supportedServices">
               <a-list-item slot="renderItem" slot-scope="item">
                 <CheckBoxSelectPair
                   v-decorator="['service.'+item.name, {}]"
@@ -71,32 +56,27 @@
             </a-list>
           </div>
         </a-form-item>
-        <a-form-item :label="$t('label.service.connectivity.regionlevelvpccapabilitycheckbox')" v-if="this.connectivityServiceChecked">
+        <a-form-item :label="$t('label.service.connectivity.regionlevelvpccapabilitycheckbox')" v-if="connectivityServiceChecked">
           <a-switch v-decorator="['regionlevelvpc', {initialValue: true}]" defaultChecked />
         </a-form-item>
-        <a-form-item :label="$t('label.service.connectivity.distributedroutercapabilitycheckbox')" v-if="this.connectivityServiceChecked">
+        <a-form-item :label="$t('label.service.connectivity.distributedroutercapabilitycheckbox')" v-if="connectivityServiceChecked">
           <a-switch v-decorator="['distributedrouter', {initialValue: true}]" defaultChecked />
         </a-form-item>
-        <a-form-item :label="$t('label.redundantrouter')" v-if="this.sourceNatServiceChecked">
+        <a-form-item :label="$t('label.redundantrouter')" v-if="sourceNatServiceChecked">
           <a-switch v-decorator="['redundantrouter', {initialValue: false}]" />
         </a-form-item>
-        <a-form-item :label="$t('label.ispublic')" v-if="this.isAdmin()">
-          <a-switch v-decorator="['ispublic', {initialValue: this.isPublic}]" :defaultChecked="this.isPublic" @change="val => { this.isPublic = val }" />
+        <a-form-item :label="$t('label.ispublic')" v-if="isAdmin()">
+          <a-switch v-decorator="['ispublic', {initialValue: isPublic}]" :defaultChecked="isPublic" @change="val => { isPublic = val }" />
         </a-form-item>
-        <a-form-item v-if="!this.isPublic">
-          <span slot="label">
-            {{ $t('label.domainid') }}
-            <a-tooltip :title="apiParams.domainid.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+        <a-form-item v-if="!isPublic">
+          <tooltip-label slot="label" :title="$t('label.domainid')" :tooltip="apiParams.domainid.description"/>
           <a-select
             mode="multiple"
             v-decorator="['domainid', {
               rules: [
                 {
                   required: true,
-                  message: `${this.$t('message.error.select')}`
+                  message: $t('message.error.select')
                 }
               ]
             }]"
@@ -106,19 +86,14 @@
               return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
             :loading="domainLoading"
-            :placeholder="this.$t('label.domain')">
-            <a-select-option v-for="(opt, optIndex) in this.domains" :key="optIndex">
+            :placeholder="apiParams.domainid.description">
+            <a-select-option v-for="(opt, optIndex) in domains" :key="optIndex">
               {{ opt.path || opt.name || opt.description }}
             </a-select-option>
           </a-select>
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.zoneid') }}
-            <a-tooltip :title="apiParams.zoneid.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.zoneid')" :tooltip="apiParams.zoneid.description"/>
           <a-select
             id="zone-selection"
             mode="multiple"
@@ -140,25 +115,20 @@
               return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }"
             :loading="zoneLoading"
-            :placeholder="this.$t('label.zone')">
-            <a-select-option v-for="(opt, optIndex) in this.zones" :key="optIndex">
+            :placeholder="apiParams.zoneid.description">
+            <a-select-option v-for="(opt, optIndex) in zones" :key="optIndex">
               {{ opt.name || opt.description }}
             </a-select-option>
           </a-select>
         </a-form-item>
         <a-form-item v-if="apiParams.enable">
-          <span slot="label">
-            {{ $t('label.enable.vpc.offering') }}
-            <a-tooltip :title="apiParams.enable.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.enable.vpc.offering')" :tooltip="apiParams.enable.description"/>
           <a-switch v-decorator="['enable', {initialValue: false}]" />
         </a-form-item>
       </a-form>
       <div :span="24" class="action-button">
-        <a-button @click="closeAction">{{ this.$t('label.cancel') }}</a-button>
-        <a-button :loading="loading" type="primary" @click="handleSubmit">{{ this.$t('label.ok') }}</a-button>
+        <a-button @click="closeAction">{{ $t('label.cancel') }}</a-button>
+        <a-button :loading="loading" type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
       </div>
     </a-spin>
   </div>
@@ -167,11 +137,13 @@
 <script>
 import { api } from '@/api'
 import CheckBoxSelectPair from '@/components/CheckBoxSelectPair'
+import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'AddVpcOffering',
   components: {
-    CheckBoxSelectPair
+    CheckBoxSelectPair,
+    TooltipLabel
   },
   data () {
     return {
diff --git a/ui/src/views/offering/ImportBackupOffering.vue b/ui/src/views/offering/ImportBackupOffering.vue
index 370b908798b..1d5c8bf30e8 100644
--- a/ui/src/views/offering/ImportBackupOffering.vue
+++ b/ui/src/views/offering/ImportBackupOffering.vue
@@ -22,12 +22,7 @@
       :form="form"
       @submit="handleSubmit">
       <a-form-item>
-        <span slot="label">
-          {{ $t('label.name') }}
-          <a-tooltip :title="apiParams.name.description">
-            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-          </a-tooltip>
-        </span>
+        <tooltip-label slot="label" :title="$t('label.name')" :tooltip="apiParams.name.description"/>
         <a-input
           autoFocus
           v-decorator="['name', {
@@ -35,24 +30,14 @@
           }]"/>
       </a-form-item>
       <a-form-item>
-        <span slot="label">
-          {{ $t('label.description') }}
-          <a-tooltip :title="apiParams.description.description">
-            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-          </a-tooltip>
-        </span>
+        <tooltip-label slot="label" :title="$t('label.description')" :tooltip="apiParams.description.description"/>
         <a-input
           v-decorator="['description', {
             rules: [{ required: true, message: $t('message.error.required.input') }]
           }]"/>
       </a-form-item>
       <a-form-item>
-        <span slot="label">
-          {{ $t('label.zoneid') }}
-          <a-tooltip :title="apiParams.zoneid.description">
-            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-          </a-tooltip>
-        </span>
+        <tooltip-label slot="label" :title="$t('label.zoneid')" :tooltip="apiParams.zoneid.description"/>
         <a-select
           showSearch
           allowClear
@@ -67,12 +52,7 @@
         </a-select>
       </a-form-item>
       <a-form-item>
-        <span slot="label">
-          {{ $t('label.externalid') }}
-          <a-tooltip :title="apiParams.externalid.description">
-            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-          </a-tooltip>
-        </span>
+        <tooltip-label slot="label" :title="$t('label.externalid')" :tooltip="apiParams.externalid.description"/>
         <a-select
           allowClear
           v-decorator="['externalid', {
@@ -85,12 +65,7 @@
         </a-select>
       </a-form-item>
       <a-form-item>
-        <span slot="label">
-          {{ $t('label.allowuserdrivenbackups') }}
-          <a-tooltip :title="apiParams.allowuserdrivenbackups.description">
-            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-          </a-tooltip>
-        </span>
+        <tooltip-label slot="label" :title="$t('label.allowuserdrivenbackups')" :tooltip="apiParams.allowuserdrivenbackups.description"/>
         <a-switch
           v-decorator="['allowuserdrivenbackups']"
           :default-checked="true"/>
@@ -105,9 +80,13 @@
 
 <script>
 import { api } from '@/api'
+import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'ImportBackupOffering',
+  components: {
+    TooltipLabel
+  },
   data () {
     return {
       loading: false,
diff --git a/ui/src/views/project/AccountsTab.vue b/ui/src/views/project/AccountsTab.vue
index 683251a9061..e6d97964ede 100644
--- a/ui/src/views/project/AccountsTab.vue
+++ b/ui/src/views/project/AccountsTab.vue
@@ -81,7 +81,7 @@
 
 <script>
 import { api } from '@/api'
-import TooltipButton from '@/components/view/TooltipButton'
+import TooltipButton from '@/components/widgets/TooltipButton'
 
 export default {
   name: 'AccountsTab',
diff --git a/ui/src/views/project/AddAccountOrUserToProject.vue b/ui/src/views/project/AddAccountOrUserToProject.vue
index f65cdc6ae04..79d70c48746 100644
--- a/ui/src/views/project/AddAccountOrUserToProject.vue
+++ b/ui/src/views/project/AddAccountOrUserToProject.vue
@@ -23,35 +23,20 @@
           @submit="addAccountToProject"
           layout="vertical">
           <a-form-item>
-            <span slot="label">
-              {{ $t('label.account') }}
-              <a-tooltip :title="apiParams.addAccountToProject.account.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.account')" :tooltip="apiParams.addAccountToProject.account.description"/>
             <a-input
               v-decorator="['account']"
               :placeholder="apiParams.addAccountToProject.account.description"
               autoFocus />
           </a-form-item>
           <a-form-item>
-            <span slot="label">
-              {{ $t('label.email') }}
-              <a-tooltip :title="apiParams.addAccountToProject.email.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.email')" :tooltip="apiParams.addAccountToProject.email.description"/>
             <a-input
               v-decorator="['email']"
               :placeholder="apiParams.addAccountToProject.email.description"></a-input>
           </a-form-item>
           <a-form-item v-if="apiParams.addAccountToProject.projectroleid">
-            <span slot="label">
-              {{ $t('label.project.role') }}
-              <a-tooltip :title="apiParams.addAccountToProject.projectroleid.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.project.role')" :tooltip="apiParams.addAccountToProject.projectroleid.description"/>
             <a-select
               showSearch
               v-decorator="['projectroleid']"
@@ -64,12 +49,7 @@
             </a-select>
           </a-form-item>
           <a-form-item v-if="apiParams.addAccountToProject.roletype">
-            <span slot="label">
-              {{ $t('label.roletype') }}
-              <a-tooltip :title="apiParams.addAccountToProject.roletype.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.name')" :tooltip="apiParams.addAccountToProject.roletype.description"/>
             <a-select
               showSearch
               v-decorator="['roletype']"
@@ -93,35 +73,20 @@
             <span slot="message" v-html="$t('message.add.user.to.project')"></span>
           </a-alert>
           <a-form-item>
-            <span slot="label">
-              {{ $t('label.user') }}
-              <a-tooltip :title="apiParams.addUserToProject.username.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.name')" :tooltip="apiParams.addUserToProject.username.description"/>
             <a-input
               v-decorator="['username']"
               :placeholder="apiParams.addUserToProject.username.description"
               autoFocus />
           </a-form-item>
           <a-form-item>
-            <span slot="label">
-              {{ $t('label.email') }}
-              <a-tooltip :title="apiParams.addUserToProject.email.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.email')" :tooltip="apiParams.addUserToProject.email.description"/>
             <a-input
               v-decorator="['email']"
               :placeholder="apiParams.addUserToProject.email.description"></a-input>
           </a-form-item>
           <a-form-item>
-            <span slot="label">
-              {{ $t('label.project.role') }}
-              <a-tooltip :title="apiParams.addUserToProject.roletype.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.project.role')" :tooltip="apiParams.addUserToProject.roletype.description"/>
             <a-select
               showSearch
               v-decorator="['projectroleid']"
@@ -134,12 +99,7 @@
             </a-select>
           </a-form-item>
           <a-form-item>
-            <span slot="label">
-              {{ $t('label.roletype') }}
-              <a-tooltip :title="apiParams.addUserToProject.roletype.description">
-                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-              </a-tooltip>
-            </span>
+            <tooltip-label slot="label" :title="$t('label.roletype')" :tooltip="apiParams.addUserToProject.roletype.description"/>
             <a-select
               showSearch
               v-decorator="['roletype']"
@@ -159,8 +119,13 @@
 </template>
 <script>
 import { api } from '@/api'
+import TooltipLabel from '@/components/widgets/TooltipLabel'
+
 export default {
   name: 'AddAccountOrUserToProject',
+  components: {
+    TooltipLabel
+  },
   props: {
     resource: {
       type: Object,
diff --git a/ui/src/views/project/InvitationsTemplate.vue b/ui/src/views/project/InvitationsTemplate.vue
index f6adc6e0013..a7769d8b037 100644
--- a/ui/src/views/project/InvitationsTemplate.vue
+++ b/ui/src/views/project/InvitationsTemplate.vue
@@ -79,7 +79,7 @@
 <script>
 import { api } from '@/api'
 import Status from '@/components/widgets/Status'
-import TooltipButton from '@/components/view/TooltipButton'
+import TooltipButton from '@/components/widgets/TooltipButton'
 
 export default {
   name: 'InvitationsTemplate',
diff --git a/ui/src/views/project/iam/ProjectRolePermissionTab.vue b/ui/src/views/project/iam/ProjectRolePermissionTab.vue
index efb4c7770d8..d606ad03d4d 100644
--- a/ui/src/views/project/iam/ProjectRolePermissionTab.vue
+++ b/ui/src/views/project/iam/ProjectRolePermissionTab.vue
@@ -102,7 +102,7 @@ import { api } from '@/api'
 import draggable from 'vuedraggable'
 import PermissionEditable from '@/views/iam/PermissionEditable'
 import RuleDelete from '@/views/iam/RuleDelete'
-import TooltipButton from '@/components/view/TooltipButton'
+import TooltipButton from '@/components/widgets/TooltipButton'
 
 export default {
   name: 'ProjectRolePermissionTab',
diff --git a/ui/src/views/project/iam/ProjectRoleTab.vue b/ui/src/views/project/iam/ProjectRoleTab.vue
index e1cdbd84e84..e69312e70ae 100644
--- a/ui/src/views/project/iam/ProjectRoleTab.vue
+++ b/ui/src/views/project/iam/ProjectRoleTab.vue
@@ -121,7 +121,7 @@
 <script>
 import { api } from '@/api'
 import ProjectRolePermissionTab from '@/views/project/iam/ProjectRolePermissionTab'
-import TooltipButton from '@/components/view/TooltipButton'
+import TooltipButton from '@/components/widgets/TooltipButton'
 export default {
   name: 'ProjectRoleTab',
   props: {
diff --git a/ui/src/views/storage/CreateVolume.vue b/ui/src/views/storage/CreateVolume.vue
index a27ca6332b1..3cbf73e9113 100644
--- a/ui/src/views/storage/CreateVolume.vue
+++ b/ui/src/views/storage/CreateVolume.vue
@@ -19,12 +19,7 @@
   <a-spin :spinning="loading">
     <a-form class="form" :form="form" @submit="handleSubmit" layout="vertical">
       <a-form-item>
-        <span slot="label">
-          {{ $t('label.name') }}
-          <a-tooltip :title="apiParams.name.description">
-            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-          </a-tooltip>
-        </span>
+        <tooltip-label slot="label" :title="$t('label.name')" :tooltip="apiParams.name.description"/>
         <a-input
           v-decorator="['name', {
             rules: [{ required: true, message: $t('message.error.volume.name') }]
@@ -33,12 +28,7 @@
           autoFocus />
       </a-form-item>
       <a-form-item>
-        <span slot="label">
-          {{ $t('label.zoneid') }}
-          <a-tooltip :title="apiParams.zoneid.description">
-            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-          </a-tooltip>
-        </span>
+        <tooltip-label slot="label" :title="$t('label.zoneid')" :tooltip="apiParams.zoneid.description"/>
         <a-select
           v-decorator="['zoneid', {
             initialValue: selectedZoneId,
@@ -54,12 +44,7 @@
         </a-select>
       </a-form-item>
       <a-form-item>
-        <span slot="label">
-          {{ $t('label.diskoffering') }}
-          <a-tooltip :title="apiParams.diskofferingid.description || 'Disk Offering'">
-            <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-          </a-tooltip>
-        </span>
+        <tooltip-label slot="label" :title="$t('label.diskofferingid')" :tooltip="apiParams.diskofferingid.description"/>
         <a-select
           v-decorator="['diskofferingid', {
             initialValue: selectedDiskOfferingId,
@@ -77,12 +62,7 @@
       </a-form-item>
       <span v-if="customDiskOffering">
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.sizegb') }}
-            <a-tooltip :title="apiParams.size.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.sizegb')" :tooltip="apiParams.size.description"/>
           <a-input
             v-decorator="['size', {
               rules: [{ required: true, message: $t('message.error.custom.disk.size') }]}]"
@@ -99,9 +79,13 @@
 
 <script>
 import { api } from '@/api'
+import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'CreateVolume',
+  components: {
+    TooltipLabel
+  },
   data () {
     return {
       zones: [],
diff --git a/ui/src/views/storage/FormSchedule.vue b/ui/src/views/storage/FormSchedule.vue
index bc10f69d2c1..cea4aa75843 100644
--- a/ui/src/views/storage/FormSchedule.vue
+++ b/ui/src/views/storage/FormSchedule.vue
@@ -193,7 +193,7 @@
 
 <script>
 import { api } from '@/api'
-import TooltipButton from '@/components/view/TooltipButton'
+import TooltipButton from '@/components/widgets/TooltipButton'
 import { timeZone } from '@/utils/timezone'
 import debounce from 'lodash/debounce'
 
diff --git a/ui/src/views/storage/ScheduledSnapshots.vue b/ui/src/views/storage/ScheduledSnapshots.vue
index 22327016e97..fc1610fd462 100644
--- a/ui/src/views/storage/ScheduledSnapshots.vue
+++ b/ui/src/views/storage/ScheduledSnapshots.vue
@@ -76,7 +76,7 @@
 
 <script>
 import { api } from '@/api'
-import TooltipButton from '@/components/view/TooltipButton'
+import TooltipButton from '@/components/widgets/TooltipButton'
 import { timeZoneName } from '@/utils/timezone'
 
 export default {
diff --git a/ui/src/views/storage/TakeSnapshot.vue b/ui/src/views/storage/TakeSnapshot.vue
index 19e2b598393..e387c4ed44d 100644
--- a/ui/src/views/storage/TakeSnapshot.vue
+++ b/ui/src/views/storage/TakeSnapshot.vue
@@ -93,7 +93,7 @@
 
 <script>
 import { api } from '@/api'
-import TooltipButton from '@/components/view/TooltipButton'
+import TooltipButton from '@/components/widgets/TooltipButton'
 
 export default {
   name: 'TakeSnapshot',
diff --git a/ui/src/views/storage/UploadLocalVolume.vue b/ui/src/views/storage/UploadLocalVolume.vue
index 7a37182bbec..998ebf207a5 100644
--- a/ui/src/views/storage/UploadLocalVolume.vue
+++ b/ui/src/views/storage/UploadLocalVolume.vue
@@ -45,12 +45,7 @@
           </a-upload-dragger>
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.name') }}
-            <a-tooltip :title="apiParams.name.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.name')" :tooltip="apiParams.name.description"/>
           <a-input
             v-decorator="['name', {
               rules: [{ required: true, message: $t('message.error.volume.name') }]
@@ -59,12 +54,7 @@
             autoFocus />
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.zone') }}
-            <a-tooltip :title="apiParams.zoneid.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.zoneid')" :tooltip="apiParams.zoneid.description"/>
           <a-select
             v-decorator="['zoneId', {
               initialValue: zoneSelected,
@@ -81,12 +71,7 @@
           </a-select>
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.format') }}
-            <a-tooltip :title="apiParams.format.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.format')" :tooltip="apiParams.format.description"/>
           <a-select
             v-decorator="['format', {
               initialValue: formats[0],
@@ -103,12 +88,7 @@
           </a-select>
         </a-form-item>
         <a-form-item>
-          <span slot="label">
-            {{ $t('label.volumechecksum') }}
-            <a-tooltip :title="apiParams.checksum.description">
-              <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
-          </span>
+          <tooltip-label slot="label" :title="$t('label.volumechecksum')" :tooltip="apiParams.checksum.description"/>
           <a-input
             v-decorator="['checksum']"
             :placeholder="$t('label.volumechecksum.description')"
@@ -126,9 +106,13 @@
 <script>
 import { api } from '@/api'
 import { axios } from '../../utils/request'
+import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'UploadLocalVolume',
+  components: {
+    TooltipLabel
+  },
   data () {
     return {
       fileList: [],