displaying info of the labels from form CreateSSHKeyPair (#9970)

Author: LayonRibeiro

ui/src/views/compute/CreateSSHKeyPair.vue

@@ -27,34 +27,25 @@
         @finish="handleSubmit"
         layout="vertical">
         <a-form-item name="name" ref="name">
-          <template #label :title="apiParams.name.description">
-            {{ $t('label.name') }}
-            <a-tooltip>
-              <info-circle-outlined style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
+          <template #label>
+            <tooltip-label :title="$t('label.name')" :tooltip="apiParams.name.description"/>
           </template>
           <a-input
             v-model:value="form.name"
             :placeholder="apiParams.name.description"
             v-focus="true" />
         </a-form-item>
         <a-form-item name="publickey" ref="publickey">
-          <template #label :title="apiParams.publickey.description">
-            {{ $t('label.publickey') }}
-            <a-tooltip>
-              <info-circle-outlined style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
+          <template #label>
+            <tooltip-label :title="$t('label.publickey')" :tooltip="apiParams.publickey.description"/>
           </template>
           <a-input
             v-model:value="form.publickey"
             :placeholder="apiParams.publickey.description"/>
         </a-form-item>
         <a-form-item name="domainid" ref="domainid" v-if="isAdminOrDomainAdmin()">
-          <template #label :title="apiParams.domainid.description">
-            {{ $t('label.domainid') }}
-            <a-tooltip>
-              <info-circle-outlined style="color: rgba(0,0,0,.45)" />
-            </a-tooltip>
+          <template #label>
+            <tooltip-label :title="$t('label.domainid')" :tooltip="apiParams.domainid.description"/>
           </template>
           <a-select
             id="domain-selection"
@@ -105,11 +96,15 @@
 import { ref, reactive, toRaw } from 'vue'
 import { api } from '@/api'
 import { mixinForm } from '@/utils/mixin'
+import TooltipLabel from '@/components/widgets/TooltipLabel'
 
 export default {
   name: 'CreateSSHKeyPair',
   mixins: [mixinForm],
   props: {},
+  components: {
+    TooltipLabel
+  },
   data () {
     return {
       domains: [],