refactor: use browser inbuilt tooltip on login/register page

src/components/LoginPage.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="flex justify-center">
         <h1 v-t="'titles.login'" class="my-4 text-center font-bold" />
-        <TooltipIcon class="mb-6" icon="i-fa6-solid:circle-info" :tooltip="$t('info.login_note')" />
+        <i class="i-fa6-solid:circle-info ml-2 mt-6 cursor-pointer" :title="$t('info.login_note')" />
     </div>
     <hr />
     <div class="w-full flex items-center justify-center text-center">
@@ -36,12 +36,7 @@
 </template>
 
 <script>
-import TooltipIcon from "./TooltipIcon.vue";
-
 export default {
-    components: {
-        TooltipIcon,
-    },
     data() {
         return {
             username: null,

src/components/PlaylistPage.vue

@@ -6,10 +6,10 @@
 
         <CollapsableText v-if="playlist?.description" :text="playlist.description" />
 
-        <div class="mt-1 flex <md:flex-col md:items-center justify-between">
+        <div class="mt-1 flex justify-between <md:flex-col md:items-center">
             <div>
                 <router-link class="link flex items-center gap-3" :to="playlist.uploaderUrl || '/'">
-                    <img loading="lazy" :src="playlist.uploaderAvatar" class="rounded-full h-12" />
+                    <img loading="lazy" :src="playlist.uploaderAvatar" class="h-12 rounded-full" />
                     <strong v-text="playlist.uploader" />
                 </router-link>
             </div>

src/components/RegisterPage.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="flex justify-center">
         <h1 v-t="'titles.register'" class="my-4 text-center font-bold" />
-        <TooltipIcon class="mb-6" icon="i-fa6-solid:circle-info" :tooltip="$t('info.register_note')" />
+        <i class="i-fa6-solid:circle-info ml-2 mt-6 cursor-pointer" :title="$t('info.register_note')" />
     </div>
     <hr />
     <div class="flex flex-col items-center justify-center text-center">
@@ -65,10 +65,9 @@
 <script>
 import { isEmail } from "../utils/Misc.js";
 import ConfirmModal from "./ConfirmModal.vue";
-import TooltipIcon from "./TooltipIcon.vue";
 
 export default {
-    components: { ConfirmModal, TooltipIcon },
+    components: { ConfirmModal },
     data() {
         return {
             username: null,

src/components/TooltipIcon.vue

@@ -1,29 +0,0 @@
-<template>
-    <div id="container" class="m-2 self-center">
-        <div :class="icon" class="cursor-pointer"></div>
-        <p id="tooltip" class="absolute mr-[20vw] mt-2 hidden rounded-l bg-gray-800 px-2 py-1 text-gray-200">
-            {{ tooltip }}
-        </p>
-    </div>
-</template>
-
-<script>
-export default {
-    props: {
-        icon: {
-            type: String, // the class name of a font awesome icon
-            required: true,
-        },
-        tooltip: {
-            type: String,
-            required: true,
-        },
-    },
-};
-</script>
-
-<style>
-#container:hover #tooltip {
-    display: block;
-}
-</style>