Use browser-native tooltips (#2189)

Replace the `floating-vue` library with the browser-native tooltips.
Reduces `dist` size by 45KB.

web/package.json

@@ -22,7 +22,6 @@
     "@vueuse/core": "^9.13.0",
     "ansi_up": "^5.2.1",
     "dayjs": "^1.11.9",
-    "floating-vue": "^2.0.0-beta.24",
     "fuse.js": "^6.6.2",
     "humanize-duration": "^3.28.0",
     "javascript-time-ago": "^2.5.9",

web/pnpm-lock.yaml

@@ -23,9 +23,6 @@ dependencies:
   dayjs:
     specifier: ^1.11.9
     version: 1.11.9
-  floating-vue:
-    specifier: ^2.0.0-beta.24
-    version: 2.0.0-beta.24(vue@3.3.4)
   fuse.js:
     specifier: ^6.6.2
     version: 6.6.2
@@ -610,16 +607,6 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
-  /@floating-ui/core@1.3.1:
-    resolution: {integrity: sha512-Bu+AMaXNjrpjh41znzHqaz3r2Nr8hHuHZT6V2LBKMhyMl0FgKA62PNYbqnfgmzOhoWZj70Zecisbo4H1rotP5g==}
-    dev: false
-
-  /@floating-ui/dom@1.1.1:
-    resolution: {integrity: sha512-TpIO93+DIujg3g7SykEAGZMDtbJRrmnYRCNYSjJlvIbGhBjRSNTLVbNeDQBrzy9qDgUbiWdc7KA0uZHZ2tJmiw==}
-    dependencies:
-      '@floating-ui/core': 1.3.1
-    dev: false
-
   /@humanwhocodes/config-array@0.11.10:
     resolution: {integrity: sha512-KVVjQmNUepDVGXNuoRRdmmEjruj0KfiGSbS8LVc12LMsWDQzRXJ0qdhN8L8uUigKpfEHRhlaQFY0ib1tnUbNeQ==}
     engines: {node: '>=10.10.0'}
@@ -2164,20 +2151,6 @@ packages:
     resolution: {integrity: sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==}
     dev: true
 
-  /floating-vue@2.0.0-beta.24(vue@3.3.4):
-    resolution: {integrity: sha512-URSzP6YXaF4u1oZ9XGL8Sn8puuM7ivp5jkOUrpy5Q1mfo9BfGppJOn+ierTmsSUfJEeHBae8KT7r5DeI3vQIEw==}
-    peerDependencies:
-      '@nuxt/kit': ^3.2.0
-      vue: ^3.2.0
-    peerDependenciesMeta:
-      '@nuxt/kit':
-        optional: true
-    dependencies:
-      '@floating-ui/dom': 1.1.1
-      vue: 3.3.4
-      vue-resize: 2.0.0-alpha.1(vue@3.3.4)
-    dev: false
-
   /for-each@0.3.3:
     resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
     dependencies:
@@ -3463,14 +3436,6 @@ packages:
       vue: 3.3.4
     dev: false
 
-  /vue-resize@2.0.0-alpha.1(vue@3.3.4):
-    resolution: {integrity: sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==}
-    peerDependencies:
-      vue: ^3.0.0
-    dependencies:
-      vue: 3.3.4
-    dev: false
-
   /vue-router@4.2.2(vue@3.3.4):
     resolution: {integrity: sha512-cChBPPmAflgBGmy3tBsjeoe3f3VOSG6naKyY5pjtrqLGbNEXdzCigFUHgBvp9e3ysAtFtEx7OLqcSDh/1Cq2TQ==}
     peerDependencies:

web/src/assets/locales/en.json

@@ -227,7 +227,6 @@
       }
     },
     "pipeline": {
-      "created": "Created",
       "tasks": "Tasks",
       "config": "Config",
       "files": "Changed files ({files})",

web/src/components/pipeline-feed/PipelineFeedItem.vue

@@ -5,14 +5,9 @@
       <span class="underline">{{ repo?.owner }} / {{ repo?.name }}</span>
       <span class="whitespace-nowrap overflow-hidden overflow-ellipsis">{{ message }}</span>
       <div class="flex flex-col mt-2">
-        <div class="flex space-x-2 items-center">
+        <div class="flex space-x-2 items-center" :title="created">
           <Icon name="since" />
-          <Tooltip>
+          <span>{{ since }}</span>
-            <span>{{ since }}</span>
-            <template #popper
-              ><span class="font-bold">{{ $t('repo.pipeline.created') }}</span> {{ created }}</template
-            >
-          </Tooltip>
         </div>
         <div class="flex space-x-2 items-center">
           <Icon name="duration" />
@@ -24,7 +19,6 @@
 </template>
 
 <script lang="ts" setup>
-import { Tooltip } from 'floating-vue';
 import { computed, toRef } from 'vue';
 
 import Icon from '~/components/atomic/Icon.vue';

web/src/components/repo/pipeline/PipelineItem.vue

@@ -54,14 +54,9 @@
           <span class="truncate">{{ duration }}</span>
         </div>
 
-        <div class="flex space-x-2 items-center min-w-0">
+        <div class="flex space-x-2 items-center min-w-0" :title="created">
           <Icon name="since" />
-          <Tooltip>
+          <span>{{ since }}</span>
-            <span>{{ since }}</span>
-            <template #popper>
-              <span class="font-bold">{{ $t('repo.pipeline.created') }}</span> {{ created }}
-            </template>
-          </Tooltip>
         </div>
       </div>
     </div>
@@ -69,7 +64,6 @@
 </template>
 
 <script lang="ts" setup>
-import { Tooltip } from 'floating-vue';
 import { toRef } from 'vue';
 
 import Icon from '~/components/atomic/Icon.vue';

web/src/main.ts

@@ -1,5 +1,4 @@
 import 'windi.css';
-import 'floating-vue/dist/style.css'; // eslint-disable-line no-restricted-imports
 import '~/compositions/useFavicon';
 import '~/style.css';
 

web/src/views/repo/pipeline/PipelineWrapper.vue

@@ -47,14 +47,9 @@
 
       <template #tabActions>
         <div class="flex justify-between gap-x-4 text-wp-text-100 flex-shrink-0 pb-2 md:p-0 mx-auto md:mr-0">
-          <div class="flex space-x-1 items-center flex-shrink-0">
+          <div class="flex space-x-1 items-center flex-shrink-0" :title="created">
             <Icon name="since" />
-            <Tooltip>
+            <span>{{ since }}</span>
-              <span>{{ since }}</span>
-              <template #popper
-                ><span class="font-bold">{{ $t('repo.pipeline.created') }}</span> {{ created }}</template
-              >
-            </Tooltip>
           </div>
           <div class="flex space-x-1 items-center flex-shrink-0">
             <Icon name="duration" />
@@ -76,7 +71,6 @@
 </template>
 
 <script lang="ts" setup>
-import { Tooltip } from 'floating-vue';
 import { computed, inject, onBeforeUnmount, onMounted, provide, Ref, ref, toRef, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';