fix(frontend): replace tooltip overlay CSS workarounds with Vuetify props (#2841)

Author: petersutter

frontend/src/components/Credentials/GBindingName.vue

@@ -10,9 +10,11 @@ SPDX-License-Identifier: Apache-2.0
       :binding="binding"
     />
     <v-tooltip
-      class="credentials-details-tooltip"
       :open-delay="500"
       location="top"
+      width="200"
+      content-class="pa-0"
+      :content-props="{ style: { background: 'transparent' } }"
     >
       <template #activator="{ props: tProps }">
         <g-text-router-link
@@ -95,14 +97,3 @@ const resourceHash = computed(() => {
 const canLinkToCredential = computed(() => canGetCloudProviderCredentials.value && resourceUid.value)
 
 </script>
-
-<style lang="scss" scoped>
-
-.credentials-details-tooltip {
-  :deep(.v-overlay__content) {
-    opacity: 1 !important;
-    padding: 0;
-    width: 200px;
-  }
-}
-</style>

frontend/src/components/Credentials/GCredentialName.vue

@@ -10,9 +10,11 @@ SPDX-License-Identifier: Apache-2.0
       :credential="credential"
     />
     <v-tooltip
-      class="credentials-details-tooltip"
       :open-delay="500"
       location="top"
+      width="200"
+      content-class="pa-0"
+      :content-props="{ style: { background: 'transparent' } }"
     >
       <template #activator="{ props: tProps }">
         <g-text-router-link
@@ -80,14 +82,3 @@ const resourceHash = computed(() => {
 const canLinkToCredential = computed(() => canGetCloudProviderCredentials.value && resourceUid.value)
 
 </script>
-
-<style lang="scss" scoped>
-
-.credentials-details-tooltip {
-  :deep(.v-overlay__content) {
-    opacity: 1 !important;
-    padding: 0;
-    width: 200px;
-  }
-}
-</style>

frontend/src/components/GProjectTooltip.vue

@@ -11,6 +11,8 @@ SPDX-License-Identifier: Apache-2.0
     :open-delay="openDelay"
     :open-on-hover="openOnHover"
     :max-width="300"
+    content-class="pa-0"
+    :content-props="{ style: { background: 'transparent' } }"
   >
     <template #activator="{ props: activatorProps }">
       <div v-bind="activatorProps">
@@ -96,10 +98,3 @@ const {
   projectPurpose,
 } = useProvideProjectItem(project)
 </script>
-
-<style lang="scss" scoped>
-:deep(.v-overlay__content) {
-  opacity: 1 !important;
-  padding: 0;
-}
-</style>

frontend/src/components/GVendor.vue

@@ -11,6 +11,8 @@ SPDX-License-Identifier: Apache-2.0
     v-else
     location="top"
     :open-delay="200"
+    content-class="pa-0"
+    :content-props="{ style: { background: 'transparent' } }"
   >
     <template #activator="{ props }">
       <div
@@ -157,10 +159,3 @@ export default {
   },
 }
 </script>
-
-<style lang="scss" scoped>
-  :deep(.v-overlay__content) {
-    opacity: 1 !important;
-    padding: 0;
-  }
-</style>