From 1eea9c59394ce1f8d78b07b8a8e9c2bc9fe6ef18 Mon Sep 17 00:00:00 2001
From: Abhishek Kumar <abhishek.mrt22@gmail.com>
Date: Fri, 7 May 2021 16:28:16 +0530
Subject: [PATCH] ui: add tooltips for actions in tab (#4842)

Adds tooltips for buttons in tabs

Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com>
---
 ui/src/components/view/DetailSettings.vue     |  30 ++---
 ui/src/components/view/InfoCard.vue           |  66 +++++------
 ui/src/components/view/ListView.vue           |  37 +++---
 ui/src/components/view/SearchView.vue         |   4 +-
 ui/src/components/view/SettingsTab.vue        |  29 ++---
 ui/src/components/view/TooltipButton.vue      | 100 +++++++++++++++++
 ui/src/views/compute/InstanceTab.vue          | 105 ++++++++----------
 .../views/compute/backup/BackupSchedule.vue   |  24 ++--
 ui/src/views/iam/RolePermissionTab.vue        |  25 ++---
 ui/src/views/iam/RuleDelete.vue               |  24 ++--
 ui/src/views/iam/SSLCertificateTab.vue        |  37 +++---
 ui/src/views/image/IsoZones.vue               |  14 ++-
 ui/src/views/image/TemplateZones.vue          |  34 +++---
 .../views/infra/network/DedicatedVLANTab.vue  |   6 +-
 .../infra/network/IpRangesTabManagement.vue   |  20 ++--
 .../views/infra/network/IpRangesTabPublic.vue |  52 +++++----
 .../infra/network/IpRangesTabStorage.vue      |  19 ++--
 .../network/providers/ProviderListView.vue    |  12 +-
 .../views/infra/zone/IpAddressRangeForm.vue   |   7 +-
 .../ZoneWizardPhysicalNetworkSetupStep.vue    |  19 ++--
 ui/src/views/network/AclListRulesTab.vue      |  10 +-
 ui/src/views/network/EgressRulesTab.vue       |   6 +-
 ui/src/views/network/FirewallRules.vue        |  12 +-
 ui/src/views/network/GuestIpRanges.vue        |  30 +++--
 .../network/IngressEgressRuleConfigure.vue    |  13 ++-
 .../views/network/InternalLBAssignedVmTab.vue |   8 +-
 ui/src/views/network/IpAddressesTab.vue       |   8 +-
 ui/src/views/network/LoadBalancing.vue        |  14 ++-
 ui/src/views/network/PortForwarding.vue       |  12 +-
 ui/src/views/network/StaticRoutesTab.vue      |   8 +-
 ui/src/views/project/AccountsTab.vue          |  65 +++++------
 ui/src/views/project/InvitationsTemplate.vue  |  40 +++----
 .../project/iam/ProjectRolePermissionTab.vue  |  23 ++--
 ui/src/views/project/iam/ProjectRoleTab.vue   |  78 ++++++-------
 ui/src/views/storage/FormSchedule.vue         |  12 +-
 ui/src/views/storage/ScheduledSnapshots.vue   |  24 ++--
 ui/src/views/storage/TakeSnapshot.vue         |  12 +-
 37 files changed, 561 insertions(+), 478 deletions(-)
 create mode 100644 ui/src/components/view/TooltipButton.vue

diff --git a/ui/src/components/view/DetailSettings.vue b/ui/src/components/view/DetailSettings.vue
index a657dd06890..9bb72fffca4 100644
--- a/ui/src/components/view/DetailSettings.vue
+++ b/ui/src/components/view/DetailSettings.vue
@@ -52,18 +52,8 @@
             :dataSource="detailOptions[newKey]"
             :placeholder="$t('label.value')"
             @change="e => onAddInputChange(e, 'newValue')" />
-          <a-tooltip arrowPointAtCenter placement="topRight">
-            <template slot="title">
-              {{ $t('label.add.setting') }}
-            </template>
-            <a-button icon="check" @click="addDetail" class="detail-button"></a-button>
-          </a-tooltip>
-          <a-tooltip arrowPointAtCenter placement="topRight">
-            <template slot="title">
-              {{ $t('label.cancel') }}
-            </template>
-            <a-button icon="close" @click="closeDetail" class="detail-button"></a-button>
-          </a-tooltip>
+          <tooltip-button :tooltip="$t('label.add.setting')" icon="check" @click="addDetail" buttonClass="detail-button" />
+          <tooltip-button :tooltip="$t('label.cancel')" icon="close" @click="closeDetail" buttonClass="detail-button" />
         </a-input-group>
         <p v-if="error" style="color: red"> {{ $t(error) }} </p>
       </div>
@@ -90,14 +80,10 @@
           slot="actions"
           v-if="!disableSettings && 'updateTemplate' in $store.getters.apis &&
             'updateVirtualMachine' in $store.getters.apis && isAdminOrOwner() && allowEditOfDetail(item.name)">
-          <a-button shape="circle" size="default" @click="updateDetail(index)" v-if="item.edit">
-            <a-icon type="check-circle" theme="twoTone" twoToneColor="#52c41a" />
-          </a-button>
-          <a-button shape="circle" size="default" @click="hideEditDetail(index)" v-if="item.edit">
-            <a-icon type="close-circle" theme="twoTone" twoToneColor="#f5222d" />
-          </a-button>
-          <a-button
-            shape="circle"
+          <tootip-button :tooltip="$t('label.cancel')" @click="hideEditDetail(index)" v-if="item.edit" iconType="close-circle" iconTwoToneColor="#f5222d" />
+          <tootip-button :tooltip="$t('label.ok')" @click="updateDetail(index)" v-if="item.edit" iconType="check-circle" iconTwoToneColor="#52c41a" />
+          <tooltip-button
+            :tooltip="$t('label.edit')"
             icon="edit"
             v-if="!item.edit"
             @click="showEditDetail(index)" />
@@ -113,7 +99,7 @@
             :cancelText="$t('label.no')"
             placement="left"
           >
-            <a-button shape="circle" type="danger" icon="delete" />
+            <tooltip-button :tooltip="$t('label.delete')" type="danger" icon="delete" />
           </a-popconfirm>
         </div>
       </a-list-item>
@@ -123,8 +109,10 @@
 
 <script>
 import { api } from '@/api'
+import TooltipButton from './TooltipButton.vue'
 
 export default {
+  components: { TooltipButton },
   name: 'DetailSettings',
   props: {
     resource: {
diff --git a/ui/src/components/view/InfoCard.vue b/ui/src/components/view/InfoCard.vue
index 15156b190fa..e25eb393983 100644
--- a/ui/src/components/view/InfoCard.vue
+++ b/ui/src/components/view/InfoCard.vue
@@ -106,19 +106,15 @@
         <div class="resource-detail-item" v-if="resource.id">
           <div class="resource-detail-item__label">{{ $t('label.id') }}</div>
           <div class="resource-detail-item__details">
-            <a-tooltip placement="right" >
-              <template slot="title">
-                <span>{{ $t('label.copyid') }}</span>
-              </template>
-              <a-button
-                style="margin-left: -5px"
-                shape="circle"
-                icon="barcode"
-                type="dashed"
-                size="small"
-                @click="$message.success($t('label.copied.clipboard'))"
-                v-clipboard:copy="resource.id" />
-            </a-tooltip>
+            <tooltip-button
+              tooltipPlacement="right"
+              :tooltip="$t('label.copyid')"
+              style="margin-left: -5px"
+              icon="barcode"
+              type="dashed"
+              size="small"
+              @click="$message.success($t('label.copied.clipboard'))"
+              v-clipboard:copy="resource.id" />
             <span style="margin-left: 10px;">{{ resource.id }}</span>
           </div>
         </div>
@@ -573,14 +569,14 @@
           <a-icon type="key" />
           <strong>
             {{ $t('label.apikey') }}
-            <a-tooltip placement="right" >
-              <template slot="title">
-                <span>{{ $t('label.copy') + ' ' + $t('label.apikey') }}</span>
-              </template>
-              <a-button shape="circle" type="dashed" size="small" @click="$message.success($t('label.copied.clipboard'))" v-clipboard:copy="resource.apikey">
-                <a-icon type="copy"/>
-              </a-button>
-            </a-tooltip>
+            <tooltip-button
+              tooltipPlacement="right"
+              :tooltip="$t('label.copy') + ' ' + $t('label.apikey')"
+              icon="copy"
+              type="dashed"
+              size="small"
+              @click="$message.success($t('label.copied.clipboard'))"
+              v-clipboard:copy="resource.apikey" />
           </strong>
           <div>
             {{ resource.apikey.substring(0, 20) }}...
@@ -590,14 +586,14 @@
           <a-icon type="lock" />
           <strong>
             {{ $t('label.secretkey') }}
-            <a-tooltip placement="right" >
-              <template slot="title">
-                <span>{{ $t('label.copy') + ' ' + $t('label.secretkey') }}</span>
-              </template>
-              <a-button shape="circle" type="dashed" size="small" @click="$message.success($t('label.copied.clipboard'))" v-clipboard:copy="resource.secretkey">
-                <a-icon type="copy"/>
-              </a-button>
-            </a-tooltip>
+            <tooltip-button
+              tooltipPlacement="right"
+              :tooltip="$t('label.copy') + ' ' + $t('label.secretkey')"
+              icon="copy"
+              type="dashed"
+              size="small"
+              @click="$message.success($t('label.copied.clipboard'))"
+              v-clipboard:copy="resource.secretkey" />
           </strong>
           <div>
             {{ resource.secretkey.substring(0, 20) }}...
@@ -626,12 +622,8 @@
                 <a-input ref="input" :value="inputKey" @change="handleKeyChange" style="width: 30%; text-align: center" :placeholder="$t('label.key')" />
                 <a-input style=" width: 30px; border-left: 0; pointer-events: none; backgroundColor: #fff" placeholder="=" disabled />
                 <a-input :value="inputValue" @change="handleValueChange" style="width: 30%; text-align: center; border-left: 0" :placeholder="$t('label.value')" />
-                <a-button shape="circle" size="small" @click="handleInputConfirm">
-                  <a-icon type="check"/>
-                </a-button>
-                <a-button shape="circle" size="small" @click="inputVisible=false">
-                  <a-icon type="close"/>
-                </a-button>
+                <tooltip-button :tooltip="$t('label.ok')" icon="check" size="small" @click="handleInputConfirm" />
+                <tooltip-button :tooltip="$t('label.cancel')" icon="close" size="small" @click="inputVisible=false" />
               </a-input-group>
             </div>
             <a-tag @click="showInput" style="background: #fff; borderStyle: dashed;" v-else-if="isAdminOrOwner() && 'createTags' in $store.getters.apis">
@@ -701,13 +693,15 @@ 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'
 
 export default {
   name: 'InfoCard',
   components: {
     Console,
     OsLogo,
-    Status
+    Status,
+    TooltipButton
   },
   props: {
     resource: {
diff --git a/ui/src/components/view/ListView.vue b/ui/src/components/view/ListView.vue
index c92c852797c..85f49b3f846 100644
--- a/ui/src/components/view/ListView.vue
+++ b/ui/src/components/view/ListView.vue
@@ -70,7 +70,7 @@
           :enabled="quickViewEnabled() && actions.length > 0 && columns && columns[0].dataIndex === 'name' "
           @exec-action="$parent.execAction"/>
         <span v-if="$route.path.startsWith('/project')" style="margin-right: 5px">
-          <a-button type="dashed" size="small" shape="circle" icon="login" @click="changeProject(record)" />
+          <tooltip-button type="dashed" size="small" icon="login" @click="changeProject(record)" />
         </span>
         <os-logo v-if="record.ostypename" :osName="record.ostypename" size="1x" style="margin-right: 5px" />
 
@@ -287,30 +287,29 @@
       </div>
     </template>
     <template slot="actions" slot-scope="text, record">
-      <a-button
-        shape="circle"
+      <tooltip-button
+        :tooltip="$t('label.edit')"
         :disabled="!('updateConfiguration' in $store.getters.apis)"
         v-if="editableValueKey !== record.key"
         icon="edit"
         @click="editValue(record)" />
-      <a-button
-        shape="circle"
+      <tooltip-button
+        :tooltip="$t('label.cancel')"
+        @click="editableValueKey = null"
+        v-if="editableValueKey === record.key"
+        iconType="close-circle"
+        iconTwoToneColor="#f5222d" />
+      <tooltip-button
+        :tooltip="$t('label.ok')"
         :disabled="!('updateConfiguration' in $store.getters.apis)"
         @click="saveValue(record)"
-        v-if="editableValueKey === record.key" >
-        <a-icon type="check-circle" theme="twoTone" twoToneColor="#52c41a" />
-      </a-button>
-      <a-button
-        shape="circle"
-        size="default"
-        @click="editableValueKey = null"
-        v-if="editableValueKey === record.key" >
-        <a-icon type="close-circle" theme="twoTone" twoToneColor="#f5222d" />
-      </a-button>
+        v-if="editableValueKey === record.key"
+        iconType="check-circle"
+        iconTwoToneColor="#52c41a" />
     </template>
     <template slot="tariffActions" slot-scope="text, record">
-      <a-button
-        shape="circle"
+      <tooltip-button
+        :tooltip="$t('label.edit')"
         v-if="editableValueKey !== record.key"
         :disabled="!('quotaTariffUpdate' in $store.getters.apis)"
         icon="edit"
@@ -327,6 +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'
 
 export default {
   name: 'ListView',
@@ -335,7 +335,8 @@ export default {
     OsLogo,
     Status,
     InfoCard,
-    QuickView
+    QuickView,
+    TooltipButton
   },
   props: {
     columns: {
diff --git a/ui/src/components/view/SearchView.vue b/ui/src/components/view/SearchView.vue
index 4b3582916f0..100acf0d47b 100644
--- a/ui/src/components/view/SearchView.vue
+++ b/ui/src/components/view/SearchView.vue
@@ -76,9 +76,7 @@
                       <a-input ref="input" :value="inputKey" @change="e => inputKey = e.target.value" style="width: 50px; text-align: center" :placeholder="$t('label.key')" />
                       <a-input style=" width: 20px; border-left: 0; pointer-events: none; backgroundColor: #fff" placeholder="=" disabled />
                       <a-input :value="inputValue" @change="handleValueChange" style="width: 50px; text-align: center; border-left: 0" :placeholder="$t('label.value')" />
-                      <a-button shape="circle" size="small" @click="inputKey = inputValue = ''">
-                        <a-icon type="close"/>
-                      </a-button>
+                      <tooltip-button icon="close" size="small" @click="inputKey = inputValue = ''" />
                     </a-input-group>
                   </div>
                 </div>
diff --git a/ui/src/components/view/SettingsTab.vue b/ui/src/components/view/SettingsTab.vue
index 10766fd05f5..aa886f371c4 100644
--- a/ui/src/components/view/SettingsTab.vue
+++ b/ui/src/components/view/SettingsTab.vue
@@ -46,25 +46,24 @@
         </div>
 
         <div slot="actions" class="action">
-          <a-button
-            shape="circle"
+          <tooltip-button
+            :tooltip="$t('label.edit')"
             :disabled="!('updateConfiguration' in $store.getters.apis)"
             v-if="editableValueKey !== index"
             icon="edit"
             @click="setEditableSetting(item, index)" />
-          <a-button
-            shape="circle"
-            size="default"
+          <tooltip-button
+            :tooltip="$t('label.cancel')"
             @click="editableValueKey = null"
-            v-if="editableValueKey === index" >
-            <a-icon type="close-circle" theme="twoTone" twoToneColor="#f5222d" />
-          </a-button>
-          <a-button
-            shape="circle"
+            v-if="editableValueKey === index"
+            iconType="close-circle"
+            iconTwoToneColor="#f5222d" />
+          <tooltip-button
+            :tooltip="$t('label.ok')"
             @click="updateData(item)"
-            v-if="editableValueKey === index" >
-            <a-icon type="check-circle" theme="twoTone" twoToneColor="#52c41a" />
-          </a-button>
+            v-if="editableValueKey === index"
+            iconType="check-circle"
+            iconTwoToneColor="#52c41a" />
         </div>
       </a-list-item>
     </a-list>
@@ -73,8 +72,12 @@
 
 <script>
 import { api } from '@/api'
+import TooltipButton from './TooltipButton.vue'
 
 export default {
+  components: {
+    TooltipButton
+  },
   name: 'SettingsTab',
   props: {
     resource: {
diff --git a/ui/src/components/view/TooltipButton.vue b/ui/src/components/view/TooltipButton.vue
new file mode 100644
index 00000000000..5290ebfb63e
--- /dev/null
+++ b/ui/src/components/view/TooltipButton.vue
@@ -0,0 +1,100 @@
+// 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>
+  <a-tooltip arrowPointAtCenter :placement="tooltipPlacement">
+    <template slot="title" v-if="tooltip">
+      {{ tooltip }}
+    </template>
+    <a-button
+      shape="circle"
+      :size="size"
+      :type="type"
+      :disabled="disabled"
+      :icon="icon"
+      :class="buttonClass"
+      :loading="loading"
+      @click="handleClicked()" >
+      <a-icon
+        v-if="iconType && iconTwoToneColor"
+        :type="iconType"
+        theme="twoTone"
+        :twoToneColor="iconTwoToneColor" />
+    </a-button>
+  </a-tooltip>
+</template>
+
+<script>
+
+export default {
+  name: 'TooltipButton',
+  props: {
+    tooltip: {
+      type: String,
+      default: null
+    },
+    tooltipPlacement: {
+      type: String,
+      default: 'bottomRight'
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    type: {
+      type: String,
+      default: 'default'
+    },
+    size: {
+      type: String,
+      default: 'default'
+    },
+    icon: {
+      type: String,
+      default: null
+    },
+    iconType: {
+      type: String,
+      default: null
+    },
+    iconTwoToneColor: {
+      type: String,
+      default: null
+    },
+    buttonClass: {
+      type: String,
+      default: ''
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  methods: {
+    handleClicked () {
+      this.$emit('click')
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+</style>
diff --git a/ui/src/views/compute/InstanceTab.vue b/ui/src/views/compute/InstanceTab.vue
index 8ad259b290a..1a169d756c7 100644
--- a/ui/src/views/compute/InstanceTab.vue
+++ b/ui/src/views/compute/InstanceTab.vue
@@ -67,61 +67,47 @@
         </a-button>
         <NicsTable :resource="vm" :loading="loading">
           <span slot="actions" slot-scope="record">
-            <a-tooltip placement="bottom">
-              <template slot="title">
-                {{ $t('label.set.default.nic') }}
-              </template>
-              <a-popconfirm
-                :title="$t('label.set.default.nic')"
-                @confirm="setAsDefault(record.nic)"
-                :okText="$t('label.yes')"
-                :cancelText="$t('label.no')"
-                v-if="!record.nic.isdefault"
-              >
-                <a-button
-                  :disabled="!('updateDefaultNicForVirtualMachine' in $store.getters.apis)"
-                  icon="check-square"
-                  shape="circle" />
-              </a-popconfirm>
-            </a-tooltip>
-            <a-tooltip placement="bottom" v-if="record.nic.type !== 'L2'">
-              <template slot="title">
-                {{ $t('label.change.ip.addess') }}
-              </template>
-              <a-button
-                icon="swap"
-                shape="circle"
-                :disabled="!('updateVmNicIp' in $store.getters.apis)"
-                @click="onChangeIPAddress(record)" />
-            </a-tooltip>
-            <a-tooltip placement="bottom" v-if="record.nic.type !== 'L2'">
-              <template slot="title">
-                {{ $t('label.edit.secondary.ips') }}
-              </template>
-              <a-button
-                icon="environment"
-                shape="circle"
-                :disabled="(!('addIpToNic' in $store.getters.apis) && !('addIpToNic' in $store.getters.apis))"
-                @click="onAcquireSecondaryIPAddress(record)" />
-            </a-tooltip>
-            <a-tooltip placement="bottom">
-              <template slot="title">
-                {{ $t('label.action.delete.nic') }}
-              </template>
-              <a-popconfirm
-                :title="$t('message.network.removenic')"
-                @confirm="removeNIC(record.nic)"
-                :okText="$t('label.yes')"
-                :cancelText="$t('label.no')"
-                v-if="!record.nic.isdefault"
-              >
-                <a-button
-                  :disabled="!('removeNicFromVirtualMachine' in $store.getters.apis)"
-                  type="danger"
-                  icon="delete"
-                  shape="circle" />
-              </a-popconfirm>
-            </a-tooltip>
+            <a-popconfirm
+              :title="$t('label.set.default.nic')"
+              @confirm="setAsDefault(record.nic)"
+              :okText="$t('label.yes')"
+              :cancelText="$t('label.no')"
+              v-if="!record.nic.isdefault"
+            >
+              <tooltip-button
+                tooltipPlacement="bottom"
+                :tooltip="$t('label.set.default.nic')"
+                :disabled="!('updateDefaultNicForVirtualMachine' in $store.getters.apis)"
+                icon="check-square" />
+            </a-popconfirm>
+            <tooltip-button
+              v-if="record.nic.type !== 'L2'"
+              tooltipPlacement="bottom"
+              :tooltip="$t('label.change.ip.addess')"
+              icon="swap"
+              :disabled="!('updateVmNicIp' in $store.getters.apis)"
+              @click="onChangeIPAddress(record)" />
+            <tooltip-button
+              v-if="record.nic.type !== 'L2'"
+              tooltipPlacement="bottom"
+              :tooltip="$t('label.edit.secondary.ips')"
+              icon="environment"
+              :disabled="(!('addIpToNic' in $store.getters.apis) && !('addIpToNic' in $store.getters.apis))"
+              @click="onAcquireSecondaryIPAddress(record)" />
+            <a-popconfirm
+              :title="$t('message.network.removenic')"
+              @confirm="removeNIC(record.nic)"
+              :okText="$t('label.yes')"
+              :cancelText="$t('label.no')"
+              v-if="!record.nic.isdefault"
+            >
+              <tooltip-button
+                tooltipPlacement="bottom"
+                :tooltip="$t('label.action.delete.nic')"
+                :disabled="!('removeNicFromVirtualMachine' in $store.getters.apis)"
+                type="danger"
+                icon="delete" />
+            </a-popconfirm>
           </span>
         </NicsTable>
       </a-tab-pane>
@@ -251,9 +237,10 @@
             :okText="$t('label.yes')"
             :cancelText="$t('label.no')"
           >
-            <a-button
+            <tooltip-button
+              tooltipPlacement="top"
+              :tooltip="$t('label.action.release.ip')"
               type="danger"
-              shape="circle"
               icon="delete" />
             {{ ip.ipaddress }}
           </a-popconfirm>
@@ -274,6 +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'
 
 export default {
   name: 'InstanceTab',
@@ -283,7 +271,8 @@ export default {
     DetailSettings,
     NicsTable,
     Status,
-    ListResourceTable
+    ListResourceTable,
+    TooltipButton
   },
   mixins: [mixinDevice],
   props: {
diff --git a/ui/src/views/compute/backup/BackupSchedule.vue b/ui/src/views/compute/backup/BackupSchedule.vue
index daf31cc31dc..0c31e86c26c 100644
--- a/ui/src/views/compute/backup/BackupSchedule.vue
+++ b/ui/src/views/compute/backup/BackupSchedule.vue
@@ -58,18 +58,14 @@
         <label>{{ getTimeZone(record.timezone) }}</label>
       </div>
       <div slot="action" class="account-button-action" slot-scope="text, record">
-        <a-tooltip placement="top">
-          <template slot="title">
-            {{ $t('label.delete') }}
-          </template>
-          <a-button
-            type="danger"
-            shape="circle"
-            icon="close"
-            size="small"
-            :loading="actionLoading"
-            @click="handleClickDelete(record)"/>
-        </a-tooltip>
+        <tooltip-button
+          tooltipPlacement="top"
+          :tooltip="$t('label.delete')"
+          type="danger"
+          icon="close"
+          size="small"
+          :loading="actionLoading"
+          @click="handleClickDelete(record)"/>
       </div>
     </a-table>
   </div>
@@ -78,9 +74,13 @@
 <script>
 import { api } from '@/api'
 import { timeZoneName } from '@/utils/timezone'
+import TooltipButton from '@/components/view/TooltipButton'
 
 export default {
   name: 'BackupSchedule',
+  components: {
+    TooltipButton
+  },
   props: {
     loading: {
       type: Boolean,
diff --git a/ui/src/views/iam/RolePermissionTab.vue b/ui/src/views/iam/RolePermissionTab.vue
index a10488cd0d9..8b6a89d6599 100644
--- a/ui/src/views/iam/RolePermissionTab.vue
+++ b/ui/src/views/iam/RolePermissionTab.vue
@@ -51,20 +51,13 @@
           <a-input v-model="newRuleDescription" :placeholder="$t('label.description')"></a-input>
         </div>
         <div class="rules-table__col rules-table__col--actions">
-          <a-tooltip
-            placement="bottom">
-            <template slot="title">
-              {{ $t('label.save.new.rule') }}
-            </template>
-            <a-button
-              :disabled="!('createRolePermission' in $store.getters.apis)"
-              icon="plus"
-              type="primary"
-              shape="circle"
-              @click="onRuleSave"
-            >
-            </a-button>
-          </a-tooltip>
+          <tooltip-button
+            tooltipPlacement="bottom"
+            :tooltip="$t('label.save.new.rule')"
+            :disabled="!('createRolePermission' in $store.getters.apis)"
+            icon="plus"
+            type="primary"
+            @click="onRuleSave" />
         </div>
       </div>
 
@@ -117,13 +110,15 @@ import { api } from '@/api'
 import draggable from 'vuedraggable'
 import PermissionEditable from './PermissionEditable'
 import RuleDelete from './RuleDelete'
+import TooltipButton from '@/components/view/TooltipButton'
 
 export default {
   name: 'RolePermissionTab',
   components: {
     RuleDelete,
     PermissionEditable,
-    draggable
+    draggable,
+    TooltipButton
   },
   props: {
     resource: {
diff --git a/ui/src/views/iam/RuleDelete.vue b/ui/src/views/iam/RuleDelete.vue
index 53c8310bc34..958fe95791e 100644
--- a/ui/src/views/iam/RuleDelete.vue
+++ b/ui/src/views/iam/RuleDelete.vue
@@ -16,24 +16,22 @@
 // under the License.
 
 <template>
-  <a-tooltip placement="bottom">
-    <template slot="title">
-      {{ $t('label.delete.rule') }}
-    </template>
-    <a-popconfirm
-      :title="`${$t('label.delete.rule')}?`"
-      @confirm="handleDelete"
-      :disabled="disabled">
-      <a-button type="danger" shape="circle" :disabled="disabled">
-        <a-icon type="delete" />
-      </a-button>
-    </a-popconfirm>
-  </a-tooltip>
+  <a-popconfirm
+    :title="`${$t('label.delete.rule')}?`"
+    @confirm="handleDelete"
+    :disabled="disabled">
+    <tooltip-button :tooltip="$t('label.delete.rule')" tooltipPlacement="bottom" type="danger" icon="delete" :disabled="disabled" />
+  </a-popconfirm>
 </template>
 
 <script>
+import TooltipButton from '@/components/view/TooltipButton'
+
 export default {
   name: 'RuleDelete',
+  components: {
+    TooltipButton
+  },
   props: {
     record: {
       type: Object,
diff --git a/ui/src/views/iam/SSLCertificateTab.vue b/ui/src/views/iam/SSLCertificateTab.vue
index a53c152ec6b..ee853e7f200 100644
--- a/ui/src/views/iam/SSLCertificateTab.vue
+++ b/ui/src/views/iam/SSLCertificateTab.vue
@@ -29,24 +29,21 @@
           v-if="!quickview"
         >
           <span slot="action" slot-scope="text, record" class="cert-button-action">
-            <a-tooltip placement="top">
-              <template slot="title">
-                {{ $t('label.quickview') }}
-              </template>
-              <a-button type="primary" shape="circle" icon="eye" size="small" @click="onQuickView(record.id)" />
-            </a-tooltip>
-            <a-tooltip placement="top">
-              <template slot="title">
-                {{ $t('label.delete.sslcertificate') }}
-              </template>
-              <a-button
-                :disabled="!('deleteSslCert' in $store.getters.apis)"
-                type="danger"
-                shape="circle"
-                icon="delete"
-                size="small"
-                @click="onShowConfirm(record)"/>
-            </a-tooltip>
+            <tooltip-button
+              tooltipPlacement="top"
+              :tooltip="$t('label.quickview')"
+              type="primary"
+              icon="eye"
+              size="small"
+              @click="onQuickView(record.id)" />
+            <tooltip-button
+              tooltipPlacement="top"
+              :tooltip="$t('label.delete.sslcertificate')"
+              :disabled="!('deleteSslCert' in $store.getters.apis)"
+              type="danger"
+              icon="delete"
+              size="small"
+              @click="onShowConfirm(record)" />
           </span>
         </a-table>
 
@@ -71,9 +68,13 @@
 
 <script>
 import { api } from '@/api'
+import TooltipButton from '@/components/view/TooltipButton'
 
 export default {
   name: 'SSLCertificate',
+  components: {
+    TooltipButton
+  },
   data () {
     return {
       columns: [],
diff --git a/ui/src/views/image/IsoZones.vue b/ui/src/views/image/IsoZones.vue
index 3899ffbfa24..2e987014358 100644
--- a/ui/src/views/image/IsoZones.vue
+++ b/ui/src/views/image/IsoZones.vue
@@ -31,10 +31,10 @@
       </div>
       <template slot="action" slot-scope="text, record">
         <span style="margin-right: 5px">
-          <a-button
+          <tooltip-button
+            :tooltip="$t('label.action.copy.iso')"
             :disabled="!('copyIso' in $store.getters.apis && record.isready)"
             icon="copy"
-            shape="circle"
             :loading="copyLoading"
             @click="showCopyIso(record)" />
         </span>
@@ -48,10 +48,10 @@
             :loading="deleteLoading"
             @confirm="deleteIso(record)"
           >
-            <a-button
+            <tooltip-button
+              :tooltip="$t('label.action.delete.iso')"
               type="danger"
-              icon="delete"
-              shape="circle" />
+              icon="delete" />
           </a-popconfirm>
         </span>
       </template>
@@ -123,9 +123,13 @@
 
 <script>
 import { api } from '@/api'
+import TooltipButton from '@/components/view/TooltipButton'
 
 export default {
   name: 'IsoZones',
+  components: {
+    TooltipButton
+  },
   props: {
     resource: {
       type: Object,
diff --git a/ui/src/views/image/TemplateZones.vue b/ui/src/views/image/TemplateZones.vue
index c64dd2e4ae9..20551202c03 100644
--- a/ui/src/views/image/TemplateZones.vue
+++ b/ui/src/views/image/TemplateZones.vue
@@ -30,22 +30,20 @@
         <span v-else>{{ $t('label.no') }}</span>
       </div>
       <template slot="action" slot-scope="text, record">
-        <span style="margin-right: 5px">
-          <a-button
-            :disabled="!('copyTemplate' in $store.getters.apis && record.isready)"
-            icon="copy"
-            shape="circle"
-            :loading="copyLoading"
-            @click="showCopyTemplate(record)" />
-        </span>
-        <span style="margin-right: 5px">
-          <a-button
-            :disabled="!('deleteTemplate' in $store.getters.apis)"
-            type="danger"
-            icon="delete"
-            shape="circle"
-            @click="onShowDeleteModal(record)"/>
-        </span>
+        <tooltip-button
+          style="margin-right: 5px"
+          :disabled="!('copyTemplate' in $store.getters.apis && record.isready)"
+          :title="$t('label.action.copy.template')"
+          icon="copy"
+          :loading="copyLoading"
+          @click="showCopyTemplate(record)" />
+        <tooltip-button
+          style="margin-right: 5px"
+          :disabled="!('deleteTemplate' in $store.getters.apis)"
+          :title="$t('label.action.delete.template')"
+          type="danger"
+          icon="delete"
+          @click="onShowDeleteModal(record)"/>
       </template>
     </a-table>
     <a-pagination
@@ -134,9 +132,13 @@
 
 <script>
 import { api } from '@/api'
+import TooltipButton from '@/components/view/TooltipButton'
 
 export default {
   name: 'TemplateZones',
+  components: {
+    TooltipButton
+  },
   props: {
     resource: {
       type: Object,
diff --git a/ui/src/views/infra/network/DedicatedVLANTab.vue b/ui/src/views/infra/network/DedicatedVLANTab.vue
index ffb82179581..2fd76002b5e 100644
--- a/ui/src/views/infra/network/DedicatedVLANTab.vue
+++ b/ui/src/views/infra/network/DedicatedVLANTab.vue
@@ -39,7 +39,7 @@
           :cancelText="$t('label.no')"
           placement="top"
         >
-          <a-button :disabled="!('releaseDedicatedGuestVlanRange' in $store.getters.apis)" icon="delete" type="danger" shape="circle"></a-button>
+          <tooltip-button :tooltip="$t('label.delete')" :disabled="!('releaseDedicatedGuestVlanRange' in $store.getters.apis)" icon="delete" type="danger" />
         </a-popconfirm>
       </template>
     </a-table>
@@ -134,9 +134,13 @@
 
 <script>
 import { api } from '@/api'
+import TooltipButton from '@/components/view/TooltipButton'
 
 export default {
   name: 'DedicatedVLANTab',
+  components: {
+    TooltipButton
+  },
   props: {
     resource: {
       type: Object,
diff --git a/ui/src/views/infra/network/IpRangesTabManagement.vue b/ui/src/views/infra/network/IpRangesTabManagement.vue
index 7f08e74cb3d..8865ddae138 100644
--- a/ui/src/views/infra/network/IpRangesTabManagement.vue
+++ b/ui/src/views/infra/network/IpRangesTabManagement.vue
@@ -39,15 +39,13 @@
       </template>
       <template slot="actions" slot-scope="record">
         <div class="actions">
-          <a-popover placement="bottom">
-            <template slot="content">{{ $t('label.remove.ip.range') }}</template>
-            <a-button
-              :disabled="!('deleteManagementNetworkIpRange' in $store.getters.apis)"
-              icon="delete"
-              shape="circle"
-              type="danger"
-              @click="handleDeleteIpRange(record)"></a-button>
-          </a-popover>
+          <tooltip-button
+            tooltipPlacement="bottom"
+            :tooltip="$t('label.remove.ip.range')"
+            :disabled="!('deleteManagementNetworkIpRange' in $store.getters.apis)"
+            icon="delete"
+            type="danger"
+            @click="handleDeleteIpRange(record)" />
         </div>
       </template>
     </a-table>
@@ -125,9 +123,13 @@
 
 <script>
 import { api } from '@/api'
+import TooltipButton from '@/components/view/TooltipButton'
 
 export default {
   name: 'IpRangesTabManagement',
+  components: {
+    TooltipButton
+  },
   props: {
     resource: {
       type: Object,
diff --git a/ui/src/views/infra/network/IpRangesTabPublic.vue b/ui/src/views/infra/network/IpRangesTabPublic.vue
index 285152ec6d8..3d96b416f01 100644
--- a/ui/src/views/infra/network/IpRangesTabPublic.vue
+++ b/ui/src/views/infra/network/IpRangesTabPublic.vue
@@ -39,34 +39,28 @@
       </template>
       <template slot="actions" slot-scope="record">
         <div class="actions">
-          <a-popover v-if="record.account === 'system'" placement="bottom">
-            <template slot="content">{{ $t('label.add.account') }}</template>
-            <a-button
-              icon="user-add"
-              shape="circle"
-              @click="() => handleOpenAddAccountModal(record)"
-              :disabled="!('dedicatePublicIpRange' in $store.getters.apis)"></a-button>
-          </a-popover>
-          <a-popover
+          <tooltip-button
+            v-if="record.account === 'system'"
+            tooltipPlacement="bottom"
+            :tooltip="$t('label.add.account')"
+            icon="user-add"
+            @click="() => handleOpenAddAccountModal(record)"
+            :disabled="!('dedicatePublicIpRange' in $store.getters.apis)" />
+          <tooltip-button
             v-else
-            placement="bottom">
-            <template slot="content">{{ $t('label.release.account') }}</template>
-            <a-button
-              icon="user-delete"
-              shape="circle"
-              type="danger"
-              @click="() => handleRemoveAccount(record.id)"
-              :disabled="!('releasePublicIpRange' in $store.getters.apis)"></a-button>
-          </a-popover>
-          <a-popover placement="bottom">
-            <template slot="content">{{ $t('label.remove.ip.range') }}</template>
-            <a-button
-              icon="delete"
-              shape="circle"
-              type="danger"
-              @click="handleDeleteIpRange(record.id)"
-              :disabled="!('deleteVlanIpRange' in $store.getters.apis)"></a-button>
-          </a-popover>
+            tooltipPlacement="bottom"
+            :tooltip="$t('label.release.account')"
+            icon="user-delete"
+            type="danger"
+            @click="() => handleRemoveAccount(record.id)"
+            :disabled="!('releasePublicIpRange' in $store.getters.apis)" />
+          <tooltip-button
+            tooltipPlacement="bottom"
+            :tooltip="$t('label.remove.ip.range')"
+            icon="delete"
+            type="danger"
+            @click="handleDeleteIpRange(record.id)"
+            :disabled="!('deleteVlanIpRange' in $store.getters.apis)" />
         </div>
       </template>
     </a-table>
@@ -201,9 +195,13 @@
 
 <script>
 import { api } from '@/api'
+import TooltipButton from '@/components/view/TooltipButton'
 
 export default {
   name: 'IpRangesTabPublic',
+  components: {
+    TooltipButton
+  },
   props: {
     resource: {
       type: Object,
diff --git a/ui/src/views/infra/network/IpRangesTabStorage.vue b/ui/src/views/infra/network/IpRangesTabStorage.vue
index 4b766a1d7bd..fdb27f1f36c 100644
--- a/ui/src/views/infra/network/IpRangesTabStorage.vue
+++ b/ui/src/views/infra/network/IpRangesTabStorage.vue
@@ -38,15 +38,12 @@
         <div>{{ returnPodName(record.podid) }}</div>
       </template>
       <template slot="actions" slot-scope="record">
-        <a-popover placement="bottom">
-          <template slot="content">{{ $t('label.remove.ip.range') }}</template>
-          <a-button
-            :disabled="!('deleteStorageNetworkIpRange' in $store.getters.apis)"
-            icon="delete"
-            shape="circle"
-            type="danger"
-            @click="handleDeleteIpRange(record.id)"></a-button>
-        </a-popover>
+        <tooltip-button
+          :tooltip="$t('label.remove.ip.range')"
+          :disabled="!('deleteStorageNetworkIpRange' in $store.getters.apis)"
+          icon="delete"
+          type="danger"
+          @click="handleDeleteIpRange(record.id)" />
       </template>
     </a-table>
     <a-pagination
@@ -120,9 +117,13 @@
 
 <script>
 import { api } from '@/api'
+import TooltipButton from '@/components/view/TooltipButton'
 
 export default {
   name: 'IpRangesTabStorage',
+  components: {
+    TooltipButton
+  },
   props: {
     resource: {
       type: Object,
diff --git a/ui/src/views/infra/network/providers/ProviderListView.vue b/ui/src/views/infra/network/providers/ProviderListView.vue
index a2d1142672a..0458877c54f 100644
--- a/ui/src/views/infra/network/providers/ProviderListView.vue
+++ b/ui/src/views/infra/network/providers/ProviderListView.vue
@@ -67,18 +67,17 @@
               {{ $t('label.delete.ciscoasa1000v') }}
             </span>
           </template>
-          <a-button
+          <tooltip-button
             v-if="resource.name==='Ovs'"
-            type="default"
-            shape="circle"
+            :tooltip="$t('label.configure')"
             icon="setting"
             size="small"
             :loading="actionLoading"
             @click="onConfigureOvs(record)"/>
-          <a-button
+          <tooltip-button
             v-else
+            :tooltip="$t('label.delete')"
             type="danger"
-            shape="circle"
             icon="close"
             size="small"
             :loading="actionLoading"
@@ -117,10 +116,11 @@
 <script>
 import { api } from '@/api'
 import Status from '@/components/widgets/Status'
+import TooltipButton from '@/components/view/TooltipButton'
 
 export default {
   name: 'ProviderListView',
-  components: { Status },
+  components: { Status, TooltipButton },
   props: {
     title: {
       type: String,
diff --git a/ui/src/views/infra/zone/IpAddressRangeForm.vue b/ui/src/views/infra/zone/IpAddressRangeForm.vue
index 07b2ef9c956..cbb5463573d 100644
--- a/ui/src/views/infra/zone/IpAddressRangeForm.vue
+++ b/ui/src/views/infra/zone/IpAddressRangeForm.vue
@@ -30,7 +30,7 @@
       :pagination="false"
       style="margin-bottom: 24px; width: 100%" >
       <template slot="actions" slot-scope="text, record">
-        <a-button type="danger" shape="circle" icon="delete" @click="onDelete(record.key)" />
+        <tooltip-button :tooltip="$t('label.delete')" type="danger" icon="delete" @click="onDelete(record.key)" />
       </template>
       <template slot="footer">
         <a-form
@@ -141,9 +141,14 @@
   </div>
 </template>
 <script>
+
+import TooltipButton from '@/components/view/TooltipButton'
 import { mixinDevice } from '@/utils/mixin.js'
 
 export default {
+  components: {
+    TooltipButton
+  },
   mixins: [mixinDevice],
   props: {
     traffic: {
diff --git a/ui/src/views/infra/zone/ZoneWizardPhysicalNetworkSetupStep.vue b/ui/src/views/infra/zone/ZoneWizardPhysicalNetworkSetupStep.vue
index 2ea3f390524..9ec2afcb1b8 100644
--- a/ui/src/views/infra/zone/ZoneWizardPhysicalNetworkSetupStep.vue
+++ b/ui/src/views/infra/zone/ZoneWizardPhysicalNetworkSetupStep.vue
@@ -76,16 +76,16 @@
                 {{ traffic.toUpperCase() }}
               </a-select-option>
             </a-select>
-            <a-button
-              class="icon-button"
-              shape="circle"
+            <tooltip-button
+              :tooltip="$t('label.add')"
+              buttonClass="icon-button"
               icon="plus"
               size="small"
               @click="trafficAdded" />
-            <a-button
-              class="icon-button"
+            <tooltip-button
+              :tooltip="$t('label.cancel')"
+              buttonClass="icon-button"
               type="danger"
-              shape="circle"
               icon="close"
               size="small"
               @click="() => { addingTrafficForKey = null }" />
@@ -102,7 +102,7 @@
         </div>
       </template>
       <template slot="actions" slot-scope="text, record">
-        <a-button v-if="physicalNetworks.indexOf(record) > 0" type="danger" shape="circle" icon="delete" @click="onDelete(record)" />
+        <tooltip-button :tooltip="$t('label.delete')" v-if="physicalNetworks.indexOf(record) > 0" type="danger" icon="delete" @click="onDelete(record)" />
       </template>
       <template slot="footer" v-if="isAdvancedZone">
         <a-button
@@ -166,7 +166,12 @@
 </template>
 <script>
 
+import TooltipButton from '@/components/view/TooltipButton'
+
 export default {
+  components: {
+    TooltipButton
+  },
   props: {
     prefillContent: {
       type: Object,
diff --git a/ui/src/views/network/AclListRulesTab.vue b/ui/src/views/network/AclListRulesTab.vue
index 8831491218e..7cc952030c9 100644
--- a/ui/src/views/network/AclListRulesTab.vue
+++ b/ui/src/views/network/AclListRulesTab.vue
@@ -87,9 +87,9 @@
               </div>
             </div>
             <div class="list__actions">
-              <a-button shape="circle" icon="tag" @click="() => openTagsModal(acl)"></a-button>
-              <a-button shape="circle" icon="edit" @click="() => openEditRuleModal(acl)"></a-button>
-              <a-button shape="circle" icon="delete" type="danger" :disabled="!('deleteNetworkACL' in $store.getters.apis)" @click="() => handleDeleteRule(acl.id)"></a-button>
+              <tooltip-button :tooltip="$t('label.tags')" icon="tag" @click="() => openTagsModal(acl)" />
+              <tooltip-button :tooltip="$t('label.edit')" icon="edit" @click="() => openEditRuleModal(acl)" />
+              <tooltip-button :tooltip="$t('label.delete')" icon="delete" type="danger" :disabled="!('deleteNetworkACL' in $store.getters.apis)" @click="() => handleDeleteRule(acl.id)" />
             </div>
           </div>
         </transition-group>
@@ -198,11 +198,13 @@
 <script>
 import { api } from '@/api'
 import draggable from 'vuedraggable'
+import TooltipButton from '@/components/view/TooltipButton'
 
 export default {
   name: 'AclListRulesTab',
   components: {
-    draggable
+    draggable,
+    TooltipButton
   },
   props: {
     resource: {
diff --git a/ui/src/views/network/EgressRulesTab.vue b/ui/src/views/network/EgressRulesTab.vue
index 9634c489f4e..6823a0bc216 100644
--- a/ui/src/views/network/EgressRulesTab.vue
+++ b/ui/src/views/network/EgressRulesTab.vue
@@ -78,7 +78,7 @@
         {{ record.icmpcode || record.endport >= 0 ? record.icmpcode || record.endport : 'All' }}
       </template>
       <template slot="actions" slot-scope="record">
-        <a-button :disabled="!('deleteEgressFirewallRule' in $store.getters.apis)" shape="circle" type="danger" icon="delete" @click="deleteRule(record)" />
+        <tooltip-button :tooltip="$t('label.delete')" :disabled="!('deleteEgressFirewallRule' in $store.getters.apis)" type="danger" icon="delete" @click="deleteRule(record)" />
       </template>
     </a-table>
     <a-pagination
@@ -102,9 +102,13 @@
 
 <script>
 import { api } from '@/api'
+import TooltipButton from '@/components/view/TooltipButton'
 
 export default {
   name: 'EgressRulesTab',
+  components: {
+    TooltipButton
+  },
   props: {
     resource: {
       type: Object,
diff --git a/ui/src/views/network/FirewallRules.vue b/ui/src/views/network/FirewallRules.vue
index 385be4e0405..5996089ae68 100644
--- a/ui/src/views/network/FirewallRules.vue
+++ b/ui/src/views/network/FirewallRules.vue
@@ -74,12 +74,12 @@
       </template>
       <template slot="actions" slot-scope="record">
         <div class="actions">
-          <a-button shape="circle" icon="tag" class="rule-action" @click="() => openTagsModal(record.id)" />
-          <a-button
-            shape="circle"
+          <tooltip-button :tooltip="$t('label.edit.tags')" icon="tag" buttonClass="rule-action" @click="() => openTagsModal(record.id)" />
+          <tooltip-button
+            :tooltip="$t('label.delete')"
             type="danger"
             icon="delete"
-            class="rule-action"
+            buttonClass="rule-action"
             :disabled="!('deleteFirewallRule' in $store.getters.apis)"
             @click="deleteRule(record)" />
         </div>
@@ -137,8 +137,12 @@
 
 <script>
 import { api } from '@/api'
+import TooltipButton from '@/components/view/TooltipButton'
 
 export default {
+  components: {
+    TooltipButton
+  },
   props: {
     resource: {
       type: Object,
diff --git a/ui/src/views/network/GuestIpRanges.vue b/ui/src/views/network/GuestIpRanges.vue
index 87a62e01a78..abc92e0185a 100644
--- a/ui/src/views/network/GuestIpRanges.vue
+++ b/ui/src/views/network/GuestIpRanges.vue
@@ -37,21 +37,17 @@
         :pagination="false" >
 
         <template slot="action" slot-scope="text, record">
-          <a-tooltip placement="bottom">
-            <template slot="title">
-              {{ $t('label.action.delete.ip.range') }}
-            </template>
-            <a-popconfirm
-              :title="$t('message.confirm.remove.ip.range')"
-              @confirm="removeIpRange(record.id)"
-              :okText="$t('label.yes')"
-              :cancelText="$t('label.no')" >
-              <a-button
-                type="danger"
-                icon="delete"
-                shape="circle" />
-            </a-popconfirm>
-          </a-tooltip>
+          <a-popconfirm
+            :title="$t('message.confirm.remove.ip.range')"
+            @confirm="removeIpRange(record.id)"
+            :okText="$t('label.yes')"
+            :cancelText="$t('label.no')" >
+            <tooltip-button
+              tooltipPlacement="bottom"
+              :tooltip="$t('label.action.delete.ip.range')"
+              type="danger"
+              icon="delete" />
+          </a-popconfirm>
         </template>
 
       </a-table>
@@ -92,10 +88,12 @@
 <script>
 import { api } from '@/api'
 import CreateVlanIpRange from '@/views/network/CreateVlanIpRange'
+import TooltipButton from '@/components/view/TooltipButton'
 export default {
   name: 'GuestIpRanges',
   components: {
-    CreateVlanIpRange
+    CreateVlanIpRange,
+    TooltipButton
   },
   props: {
     resource: {
diff --git a/ui/src/views/network/IngressEgressRuleConfigure.vue b/ui/src/views/network/IngressEgressRuleConfigure.vue
index 3d7e7db892e..59a0b240bbe 100644
--- a/ui/src/views/network/IngressEgressRuleConfigure.vue
+++ b/ui/src/views/network/IngressEgressRuleConfigure.vue
@@ -106,14 +106,19 @@
         <div v-else>{{ text }}</div>
       </template>
       <template slot="actions" slot-scope="record">
-        <a-button shape="circle" icon="tag" class="rule-action" @click="() => openTagsModal(record)" />
+        <tooltip-button :tooltip="$t('label.edit.tags')" icon="tag" buttonClass="rule-action" @click="() => openTagsModal(record)" />
         <a-popconfirm
           :title="$t('label.delete') + '?'"
           @confirm="handleDeleteRule(record)"
           :okText="$t('label.yes')"
           :cancelText="$t('label.no')"
         >
-          <a-button :disabled="!('revokeSecurityGroupIngress' in $store.getters.apis) && !('revokeSecurityGroupEgress' in $store.getters.apis)" shape="circle" type="danger" icon="delete" class="rule-action" />
+          <tooltip-button
+            :disabled="!('revokeSecurityGroupIngress' in $store.getters.apis) && !('revokeSecurityGroupEgress' in $store.getters.apis)"
+            :tooltip="$t('label.delete')"
+            type="danger"
+            icon="delete"
+            buttonClass="rule-action" />
         </a-popconfirm>
       </template>
     </a-table>
@@ -165,8 +170,12 @@
 
 <script>
 import { api } from '@/api'
+import TooltipButton from '@/components/view/TooltipButton'
 
 export default {
+  components: {
+    TooltipButton
+  },
   props: {
     resource: {
       type: Object,
diff --git a/ui/src/views/network/InternalLBAssignedVmTab.vue b/ui/src/views/network/InternalLBAssignedVmTab.vue
index 22e6b58ffbf..033797ac62b 100644
--- a/ui/src/views/network/InternalLBAssignedVmTab.vue
+++ b/ui/src/views/network/InternalLBAssignedVmTab.vue
@@ -36,10 +36,10 @@
         </span>
       </template>
       <template slot="remove" slot-scope="text, record">
-        <a-button
+        <tooltip-button
+          :tooltip="$t('label.remove.vm.from.lb')"
           type="danger"
           icon="delete"
-          shape="circle"
           @click="removeVmFromLB(record)" />
       </template>
       <a-divider />
@@ -63,9 +63,13 @@
 </template>
 <script>
 import { api } from '@/api'
+import TooltipButton from '@/components/view/TooltipButton'
 
 export default {
   name: 'InternalLBAssignedVmTab',
+  components: {
+    TooltipButton
+  },
   props: {
     resource: {
       type: Object,
diff --git a/ui/src/views/network/IpAddressesTab.vue b/ui/src/views/network/IpAddressesTab.vue
index 83df009d72b..4e630095b92 100644
--- a/ui/src/views/network/IpAddressesTab.vue
+++ b/ui/src/views/network/IpAddressesTab.vue
@@ -72,11 +72,11 @@
         </template>
 
         <template slot="action" slot-scope="text, record">
-          <a-button
+          <tooltip-button
             v-if="record.issourcenat !== true && record.forvirtualnetwork === true"
+            :tooltip="$t('label.action.release.ip')"
             type="danger"
             icon="delete"
-            shape="circle"
             :disabled="!('disassociateIpAddress' in $store.getters.apis)"
             @click="releaseIpAddress(record)" />
         </template>
@@ -129,11 +129,13 @@
 <script>
 import { api } from '@/api'
 import Status from '@/components/widgets/Status'
+import TooltipButton from '@/components/view/TooltipButton'
 
 export default {
   name: 'IpAddressesTab',
   components: {
-    Status
+    Status,
+    TooltipButton
   },
   props: {
     resource: {
diff --git a/ui/src/views/network/LoadBalancing.vue b/ui/src/views/network/LoadBalancing.vue
index ddbcf3861e2..45e4d158642 100644
--- a/ui/src/views/network/LoadBalancing.vue
+++ b/ui/src/views/network/LoadBalancing.vue
@@ -99,8 +99,8 @@
                 </router-link>
               </div>
               <div>{{ ip }}</div>
-              <a-button
-                shape="circle"
+              <tooltip-button
+                :tooltip="$t('label.action.delete.load.balancer')"
                 type="danger"
                 icon="delete"
                 @click="() => handleDeleteInstanceFromRule(instance, record, ip)" />
@@ -110,15 +110,15 @@
       </template>
       <template slot="actions" slot-scope="record">
         <div class="actions">
-          <a-button shape="circle" icon="edit" @click="() => openEditRuleModal(record)"></a-button>
-          <a-button :disabled="!('updateLoadBalancerRule' in $store.getters.apis)" shape="circle" icon="tag" @click="() => openTagsModal(record.id)" />
+          <tooltip-button :tooltip="$t('label.edit')" icon="edit" @click="() => openEditRuleModal(record)" />
+          <tooltip-button :tooltip="$t('label.edit.tags')" :disabled="!('updateLoadBalancerRule' in $store.getters.apis)" icon="tag" @click="() => openTagsModal(record.id)" />
           <a-popconfirm
             :title="$t('label.delete') + '?'"
             @confirm="handleDeleteRule(record)"
             :okText="$t('label.yes')"
             :cancelText="$t('label.no')"
           >
-            <a-button :disabled="!('deleteLoadBalancerRule' in $store.getters.apis)" shape="circle" type="danger" icon="delete" />
+            <tooltip-button :tooltip="$t('label.delete')" :disabled="!('deleteLoadBalancerRule' in $store.getters.apis)" type="danger" icon="delete" />
           </a-popconfirm>
         </div>
       </template>
@@ -384,11 +384,13 @@
 <script>
 import { api } from '@/api'
 import Status from '@/components/widgets/Status'
+import TooltipButton from '@/components/view/TooltipButton'
 
 export default {
   name: 'LoadBalancing',
   components: {
-    Status
+    Status,
+    TooltipButton
   },
   props: {
     resource: {
diff --git a/ui/src/views/network/PortForwarding.vue b/ui/src/views/network/PortForwarding.vue
index 29208d96006..893187646e2 100644
--- a/ui/src/views/network/PortForwarding.vue
+++ b/ui/src/views/network/PortForwarding.vue
@@ -97,12 +97,12 @@
       </template>
       <template slot="actions" slot-scope="record">
         <div class="actions">
-          <a-button shape="circle" icon="tag" class="rule-action" @click="() => openTagsModal(record.id)" />
-          <a-button
-            shape="circle"
+          <tooltip-button :tooltip="$t('label.tags')" icon="tag" buttonClass="rule-action" @click="() => openTagsModal(record.id)" />
+          <tooltip-button
+            :tooltip="$t('label.remove.rule')"
             type="danger"
             icon="delete"
-            class="rule-action"
+            buttonClass="rule-action"
             :disabled="!('deletePortForwardingRule' in $store.getters.apis)"
             @click="deleteRule(record)" />
         </div>
@@ -252,10 +252,12 @@
 <script>
 import { api } from '@/api'
 import Status from '@/components/widgets/Status'
+import TooltipButton from '@/components/view/TooltipButton'
 
 export default {
   components: {
-    Status
+    Status,
+    TooltipButton
   },
   props: {
     resource: {
diff --git a/ui/src/views/network/StaticRoutesTab.vue b/ui/src/views/network/StaticRoutesTab.vue
index 3de2c729013..53a01c08880 100644
--- a/ui/src/views/network/StaticRoutesTab.vue
+++ b/ui/src/views/network/StaticRoutesTab.vue
@@ -29,8 +29,8 @@
           <div>{{ route.cidr }}</div>
         </div>
         <div class="actions">
-          <a-button shape="circle" icon="tag" @click="() => openTagsModal(route)"></a-button>
-          <a-button :disabled="!('deleteStaticRoute' in $store.getters.apis)" shape="circle" icon="delete" type="danger" @click="() => handleDelete(route)"></a-button>
+          <tooltip-button :tooltip="$t('label.edit.tags')" icon="tag" @click="() => openTagsModal(route)" />
+          <tooltip-button :tooltip="$t('label.delete')" :disabled="!('deleteStaticRoute' in $store.getters.apis)" icon="delete" type="danger" @click="() => handleDelete(route)" />
         </div>
       </div>
     </div>
@@ -76,9 +76,13 @@
 
 <script>
 import { api } from '@/api'
+import TooltipButton from '@/components/view/TooltipButton'
 
 export default {
   name: 'StaticRoutesTab',
+  components: {
+    TooltipButton
+  },
   props: {
     resource: {
       type: Object,
diff --git a/ui/src/views/project/AccountsTab.vue b/ui/src/views/project/AccountsTab.vue
index ed757354b3a..683251a9061 100644
--- a/ui/src/views/project/AccountsTab.vue
+++ b/ui/src/views/project/AccountsTab.vue
@@ -33,43 +33,30 @@
             {{ getProjectRole(record) }}
           </span>
           <span v-if="imProjectAdmin && dataSource.length > 1" slot="action" slot-scope="text, record" class="account-button-action">
-            <a-tooltip
-              slot="title"
-              placement="top"
-              :title="record.userid ? $t('label.make.user.project.owner') : $t('label.make.project.owner')">
-              <a-button
-                v-if="record.role !== owner"
-                type="default"
-                shape="circle"
-                icon="arrow-up"
-                size="small"
-                @click="promoteAccount(record)" />
-            </a-tooltip>
-            <a-tooltip
-              slot="title"
-              placement="top"
-              :title="record.userid ? $t('label.demote.project.owner.user') : $t('label.demote.project.owner')"
-              v-if="updateProjectApi.params.filter(x => x.name === 'swapowner').length > 0">
-              <a-button
-                v-if="record.role === owner"
-                type="default"
-                shape="circle"
-                icon="arrow-down"
-                size="small"
-                @click="demoteAccount(record)" />
-            </a-tooltip>
-            <a-tooltip
-              slot="title"
-              placement="top"
-              :title="record.userid ? $t('label.remove.project.user') : $t('label.remove.project.account')">
-              <a-button
-                type="danger"
-                shape="circle"
-                icon="delete"
-                size="small"
-                :disabled="!('deleteAccountFromProject' in $store.getters.apis)"
-                @click="onShowConfirmDelete(record)"/>
-            </a-tooltip>
+            <tooltip-button
+              tooltipPlacement="top"
+              :tooltip="record.userid ? $t('label.make.user.project.owner') : $t('label.make.project.owner')"
+              v-if="record.role !== owner"
+              type="default"
+              icon="arrow-up"
+              size="small"
+              @click="promoteAccount(record)" />
+            <tooltip-button
+              tooltipPlacement="top"
+              :tooltip="record.userid ? $t('label.demote.project.owner.user') : $t('label.demote.project.owner')"
+              v-if="updateProjectApi.params.filter(x => x.name === 'swapowner').length > 0 && record.role === owner"
+              type="default"
+              icon="arrow-down"
+              size="small"
+              @click="demoteAccount(record)" />
+            <tooltip-button
+              tooltipPlacement="top"
+              :tooltip="record.userid ? $t('label.remove.project.user') : $t('label.remove.project.account')"
+              type="danger"
+              icon="delete"
+              size="small"
+              :disabled="!('deleteAccountFromProject' in $store.getters.apis)"
+              @click="onShowConfirmDelete(record)" />
           </span>
         </a-table>
         <a-pagination
@@ -94,9 +81,13 @@
 
 <script>
 import { api } from '@/api'
+import TooltipButton from '@/components/view/TooltipButton'
 
 export default {
   name: 'AccountsTab',
+  components: {
+    TooltipButton
+  },
   props: {
     resource: {
       type: Object,
diff --git a/ui/src/views/project/InvitationsTemplate.vue b/ui/src/views/project/InvitationsTemplate.vue
index 6aa05ecdd96..f6adc6e0013 100644
--- a/ui/src/views/project/InvitationsTemplate.vue
+++ b/ui/src/views/project/InvitationsTemplate.vue
@@ -40,28 +40,20 @@
             <status :text="text ? text : ''" displayText />
           </template>
           <span slot="action" v-if="record.state===stateAllow" slot-scope="text, record" class="account-button-action">
-            <a-tooltip placement="top">
-              <template slot="title">
-                {{ $t('label.accept.project.invitation') }}
-              </template>
-              <a-button
-                type="success"
-                shape="circle"
-                icon="check"
-                size="small"
-                @click="onShowConfirmAcceptInvitation(record)"/>
-            </a-tooltip>
-            <a-tooltip placement="top">
-              <template slot="title">
-                {{ $t('label.decline.invitation') }}
-              </template>
-              <a-button
-                type="danger"
-                shape="circle"
-                icon="close"
-                size="small"
-                @click="onShowConfirmRevokeInvitation(record)"/>
-            </a-tooltip>
+            <tooltip-button
+              tooltipPlacement="top"
+              :tooltip="$t('label.accept.project.invitation')"
+              type="success"
+              icon="check"
+              size="small"
+              @click="onShowConfirmAcceptInvitation(record)"/>
+            <tooltip-button
+              tooltipPlacement="top"
+              :tooltip="$t('label.decline.invitation')"
+              type="danger"
+              icon="close"
+              size="small"
+              @click="onShowConfirmRevokeInvitation(record)"/>
           </span>
         </a-table>
         <a-pagination
@@ -87,11 +79,13 @@
 <script>
 import { api } from '@/api'
 import Status from '@/components/widgets/Status'
+import TooltipButton from '@/components/view/TooltipButton'
 
 export default {
   name: 'InvitationsTemplate',
   components: {
-    Status
+    Status,
+    TooltipButton
   },
   data () {
     return {
diff --git a/ui/src/views/project/iam/ProjectRolePermissionTab.vue b/ui/src/views/project/iam/ProjectRolePermissionTab.vue
index 84c4636af67..efb4c7770d8 100644
--- a/ui/src/views/project/iam/ProjectRolePermissionTab.vue
+++ b/ui/src/views/project/iam/ProjectRolePermissionTab.vue
@@ -46,19 +46,12 @@
           <a-input v-model="newRuleDescription" placeholder="Description"></a-input>
         </div>
         <div class="rules-table__col rules-table__col--actions">
-          <a-tooltip
-            placement="bottom">
-            <template slot="title">
-              Save new Rule
-            </template>
-            <a-button
-              icon="plus"
-              type="primary"
-              shape="circle"
-              @click="onRuleSave"
-            >
-            </a-button>
-          </a-tooltip>
+          <tooltip-button
+            tooltipPlacement="bottom"
+            :tooltip="$t('label.save.new.rule')"
+            icon="plus"
+            type="primary"
+            @click="onRuleSave" />
         </div>
       </div>
 
@@ -109,13 +102,15 @@ 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'
 
 export default {
   name: 'ProjectRolePermissionTab',
   components: {
     RuleDelete,
     PermissionEditable,
-    draggable
+    draggable,
+    TooltipButton
   },
   props: {
     resource: {
diff --git a/ui/src/views/project/iam/ProjectRoleTab.vue b/ui/src/views/project/iam/ProjectRoleTab.vue
index 6500dd6d9fe..e1cdbd84e84 100644
--- a/ui/src/views/project/iam/ProjectRoleTab.vue
+++ b/ui/src/views/project/iam/ProjectRoleTab.vue
@@ -36,29 +36,20 @@
             {{ record }}
           </template>
           <span slot="action" slot-scope="text, record">
-            <a-tooltip placement="top">
-              <template slot="title">
-                {{ $t('label.update.project.role') }}
-              </template>
-              <a-button
-                type="default"
-                shape="circle"
-                icon="edit"
-                size="small"
-                style="margin:10px"
-                @click="openUpdateModal(record)" />
-            </a-tooltip>
-            <a-tooltip placement="top">
-              <template slot="title">
-                {{ $t('label.remove.project.role') }}
-              </template>
-              <a-button
-                type="danger"
-                shape="circle"
-                icon="delete"
-                size="small"
-                @click="deleteProjectRole(record)"/>
-            </a-tooltip>
+            <tooltip-button
+              tooltipPlacement="top"
+              :tooltip="$t('label.update.project.role')"
+              icon="edit"
+              size="small"
+              style="margin:10px"
+              @click="openUpdateModal(record)" />
+            <tooltip-button
+              tooltipPlacement="top"
+              :tooltip="$t('label.remove.project.role')"
+              type="danger"
+              icon="delete"
+              size="small"
+              @click="deleteProjectRole(record)" />
           </span>
         </a-table>
         <a-modal
@@ -82,29 +73,20 @@
               <a-button type="primary" @click="updateProjectRole" :loading="loading">{{ $t('label.ok') }}</a-button>
             </div>
             <span slot="action" slot-scope="text, record">
-              <a-tooltip placement="top">
-                <template slot="title">
-                  {{ $t('label.update.project.role') }}
-                </template>
-                <a-button
-                  type="default"
-                  shape="circle"
-                  icon="edit"
-                  size="small"
-                  style="margin:10px"
-                  @click="openUpdateModal(record)" />
-              </a-tooltip>
-              <a-tooltip placement="top">
-                <template slot="title">
-                  {{ $t('label.remove.project.role') }}
-                </template>
-                <a-button
-                  type="danger"
-                  shape="circle"
-                  icon="delete"
-                  size="small"
-                  @click="deleteProjectRole(record)"/>
-              </a-tooltip>
+              <tooltip-button
+                tooltipPlacement="top"
+                :tooltip="$t('label.update.project.role')"
+                icon="edit"
+                size="small"
+                style="margin:10px"
+                @click="openUpdateModal(record)" />
+              <tooltip-button
+                tooltipPlacement="top"
+                :tooltip="$t('label.remove.project.role')"
+                type="danger"
+                icon="edit"
+                size="small"
+                @click="deleteProjectRole(record)" />
             </span>
           </a-form>
         </a-modal>
@@ -139,6 +121,7 @@
 <script>
 import { api } from '@/api'
 import ProjectRolePermissionTab from '@/views/project/iam/ProjectRolePermissionTab'
+import TooltipButton from '@/components/view/TooltipButton'
 export default {
   name: 'ProjectRoleTab',
   props: {
@@ -148,7 +131,8 @@ export default {
     }
   },
   components: {
-    ProjectRolePermissionTab
+    ProjectRolePermissionTab,
+    TooltipButton
   },
   data () {
     return {
diff --git a/ui/src/views/storage/FormSchedule.vue b/ui/src/views/storage/FormSchedule.vue
index edf6a64320c..bc10f69d2c1 100644
--- a/ui/src/views/storage/FormSchedule.vue
+++ b/ui/src/views/storage/FormSchedule.vue
@@ -163,12 +163,8 @@
                 <a-input ref="input" :value="inputKey" @change="handleKeyChange" style="width: 100px; text-align: center" :placeholder="$t('label.key')" />
                 <a-input style=" width: 30px; border-left: 0; pointer-events: none; backgroundColor: #fff" placeholder="=" disabled />
                 <a-input :value="inputValue" @change="handleValueChange" style="width: 100px; text-align: center; border-left: 0" :placeholder="$t('label.value')" />
-                <a-button shape="circle" size="small" @click="handleInputConfirm">
-                  <a-icon type="check"/>
-                </a-button>
-                <a-button shape="circle" size="small" @click="inputVisible=false">
-                  <a-icon type="close"/>
-                </a-button>
+                <tooltip-button :tooltip="$t('label.ok')" icon="check" size="small" @click="handleInputConfirm" />
+                <tooltip-button :tooltip="$t('label.cancel')" icon="close" size="small" @click="inputVisible=false" />
               </a-input-group>
             </div>
             <a-tag v-else @click="showInput" style="background: #fff; borderStyle: dashed;">
@@ -197,11 +193,15 @@
 
 <script>
 import { api } from '@/api'
+import TooltipButton from '@/components/view/TooltipButton'
 import { timeZone } from '@/utils/timezone'
 import debounce from 'lodash/debounce'
 
 export default {
   name: 'FormSchedule',
+  components: {
+    TooltipButton
+  },
   props: {
     loading: {
       type: Boolean,
diff --git a/ui/src/views/storage/ScheduledSnapshots.vue b/ui/src/views/storage/ScheduledSnapshots.vue
index 7193231d1db..22327016e97 100644
--- a/ui/src/views/storage/ScheduledSnapshots.vue
+++ b/ui/src/views/storage/ScheduledSnapshots.vue
@@ -61,18 +61,14 @@
         <a-tag v-for="(tag, index) in record.tags" :key="index">{{ tag.key + '=' + tag.value }}</a-tag>
       </div>
       <div slot="action" class="account-button-action" slot-scope="text, record">
-        <a-tooltip placement="top">
-          <template slot="title">
-            {{ $t('label.delete') }}
-          </template>
-          <a-button
-            type="danger"
-            shape="circle"
-            icon="close"
-            size="small"
-            :loading="actionLoading"
-            @click="handleClickDelete(record)"/>
-        </a-tooltip>
+        <tooltip-button
+          tooltipPlacement="top"
+          :tooltip="$t('label.delete')"
+          type="danger"
+          icon="close"
+          size="small"
+          :loading="actionLoading"
+          @click="handleClickDelete(record)" />
       </div>
     </a-table>
   </div>
@@ -80,10 +76,14 @@
 
 <script>
 import { api } from '@/api'
+import TooltipButton from '@/components/view/TooltipButton'
 import { timeZoneName } from '@/utils/timezone'
 
 export default {
   name: 'ScheduledSnapshots',
+  components: {
+    TooltipButton
+  },
   props: {
     loading: {
       type: Boolean,
diff --git a/ui/src/views/storage/TakeSnapshot.vue b/ui/src/views/storage/TakeSnapshot.vue
index 59cc003a3de..c6de71f4bca 100644
--- a/ui/src/views/storage/TakeSnapshot.vue
+++ b/ui/src/views/storage/TakeSnapshot.vue
@@ -64,12 +64,8 @@
               <a-input ref="input" :value="inputKey" @change="handleKeyChange" style="width: 100px; text-align: center" :placeholder="$t('label.key')" />
               <a-input style=" width: 30px; border-left: 0; pointer-events: none; backgroundColor: #fff" placeholder="=" disabled />
               <a-input :value="inputValue" @change="handleValueChange" style="width: 100px; text-align: center; border-left: 0" :placeholder="$t('label.value')" />
-              <a-button shape="circle" size="small" @click="handleInputConfirm">
-                <a-icon type="check"/>
-              </a-button>
-              <a-button shape="circle" size="small" @click="inputVisible=false">
-                <a-icon type="close"/>
-              </a-button>
+              <tooltip-button :tooltip="$t('label.ok')" icon="check" size="small" @click="handleInputConfirm" />
+              <tooltip-button :tooltip="$t('label.cancel')" icon="close" size="small" @click="inputVisible=false" />
             </a-input-group>
           </div>
           <a-tag v-else @click="showInput" style="background: #fff; borderStyle: dashed;">
@@ -97,9 +93,13 @@
 
 <script>
 import { api } from '@/api'
+import TooltipButton from '@/components/view/TooltipButton'
 
 export default {
   name: 'TakeSnapshot',
+  components: {
+    TooltipButton
+  },
   props: {
     loading: {
       type: Boolean,