From 9ae8789d147b5a9cb6aa5c37c0c657e944944d4e Mon Sep 17 00:00:00 2001
From: pa <maplenagisa@gmail.com>
Date: Wed, 7 Jan 2026 01:43:41 +0900
Subject: [PATCH] replace el-tooltip with TooltipProvider

---
 src/components/InstanceInfo.vue               |   4 +-
 src/components/InviteYourself.vue             |   8 +-
 src/components/LastJoin.vue                   |   4 +-
 src/components/Launch.vue                     |   4 +-
 src/components/Location.vue                   |  12 +-
 src/components/LocationWorld.vue              |   4 +-
 src/components/NavMenu.vue                    |  24 +--
 .../dialogs/AvatarDialog/AvatarDialog.vue     |  42 ++---
 .../dialogs/GroupDialog/GroupDialog.vue       | 148 +++++++++---------
 .../GroupMemberModerationDialog.vue           |   4 +-
 src/components/dialogs/LaunchDialog.vue       |  16 +-
 .../PreviousInstancesInfoDialog.vue           |  12 +-
 .../dialogs/UserDialog/UserActionDropdown.vue |  10 +-
 .../dialogs/UserDialog/UserDialog.vue         | 124 +++++++--------
 .../dialogs/UserDialog/UserSummaryHeader.vue  |  54 +++----
 .../dialogs/WorldDialog/WorldDialog.vue       |  58 +++----
 src/components/ui/tooltip/TooltipWrapper.vue  |   9 +-
 src/plugin/components.js                      |   2 +
 .../Charts/components/InstanceActivity.vue    |  16 +-
 src/views/Charts/components/MutualFriends.vue |  14 +-
 src/views/Favorites/FavoritesAvatar.vue       |   8 +-
 src/views/Favorites/FavoritesFriend.vue       |   4 +-
 src/views/Favorites/FavoritesWorld.vue        |   4 +-
 .../components/FavoritesAvatarItem.vue        |  32 ++--
 .../FavoritesAvatarLocalHistoryItem.vue       |   8 +-
 .../components/FavoritesFriendItem.vue        |   8 +-
 .../components/FavoritesWorldItem.vue         |  14 +-
 .../components/FavoritesWorldLocalItem.vue    |  14 +-
 src/views/Feed/Feed.vue                       |   4 +-
 src/views/FriendList/FriendList.vue           |  12 +-
 .../FriendsLocations/FriendsLocations.vue     |   4 +-
 src/views/GameLog/GameLog.vue                 |   4 +-
 src/views/Login/Login.vue                     |   8 +-
 src/views/Moderation/Moderation.vue           |   4 +-
 src/views/Notifications/Notification.vue      |   4 +-
 src/views/PlayerList/PlayerList.vue           |  66 ++++----
 .../components/PhotonEventTable.vue           |  36 ++---
 src/views/Search/Search.vue                   |   8 +-
 .../Settings/components/SimpleSwitch.vue      |   4 +-
 .../Settings/components/Tabs/AdvancedTab.vue  |   8 +-
 .../Settings/components/Tabs/GeneralTab.vue   |   6 +-
 .../Settings/components/Tabs/PicturesTab.vue  |  12 +-
 .../Settings/dialogs/FeedFiltersDialog.vue    |   6 +-
 .../Settings/dialogs/RegistryBackupDialog.vue |  12 +-
 .../Settings/dialogs/VRChatConfigDialog.vue   |   4 +-
 src/views/Sidebar/Sidebar.vue                 |   4 +-
 46 files changed, 437 insertions(+), 430 deletions(-)

diff --git a/src/components/InstanceInfo.vue b/src/components/InstanceInfo.vue
index 74320955..0844976a 100644
--- a/src/components/InstanceInfo.vue
+++ b/src/components/InstanceInfo.vue
@@ -1,6 +1,6 @@
 <template>
     <div style="display: inline-block; margin-left: 5px">
-        <el-tooltip v-if="state.isValidInstance" placement="bottom">
+        <TooltipWrapper v-if="state.isValidInstance" side="bottom">
             <template #content>
                 <div>
                     <span v-if="props.instance.closedAt"
@@ -40,7 +40,7 @@
                 </div>
             </template>
             <el-icon><CaretBottom /></el-icon>
-        </el-tooltip>
+        </TooltipWrapper>
         <span v-if="props.location === locationStore.lastLocation.location" style="margin-left: 5px"
             >{{ locationStore.lastLocation.playerList.size }}/{{ props.instance.capacity }}</span
         >
diff --git a/src/components/InviteYourself.vue b/src/components/InviteYourself.vue
index 658aa436..98c43e5c 100644
--- a/src/components/InviteYourself.vue
+++ b/src/components/InviteYourself.vue
@@ -1,16 +1,16 @@
 <template>
     <div v-if="isVisible" :class="['inline-block']">
-        <el-tooltip v-if="!canOpenInstanceInGame" placement="top" :content="t('dialog.user.info.self_invite_tooltip')">
+        <TooltipWrapper v-if="!canOpenInstanceInGame" side="top" :content="t('dialog.user.info.self_invite_tooltip')">
             <el-button v-show="isVisible" @click="confirmInvite" size="small" :icon="Message" circle />
-        </el-tooltip>
-        <el-tooltip v-else placement="top" :content="t('dialog.user.info.open_in_vrchat_tooltip')">
+        </TooltipWrapper>
+        <TooltipWrapper v-else side="top" :content="t('dialog.user.info.open_in_vrchat_tooltip')">
             <el-button v-if="isOpeningInstance" size="small" circle>
                 <el-icon class="is-loading">
                     <Loading />
                 </el-icon>
             </el-button>
             <el-button v-else @click="openInstance" size="small" :icon="Message" circle />
-        </el-tooltip>
+        </TooltipWrapper>
     </div>
 </template>
 
diff --git a/src/components/LastJoin.vue b/src/components/LastJoin.vue
index 70bffa44..52f6d703 100644
--- a/src/components/LastJoin.vue
+++ b/src/components/LastJoin.vue
@@ -1,11 +1,11 @@
 <template>
     <span v-if="lastJoin" :class="['inline-block', 'ml-5']">
-        <el-tooltip placement="top" class="ml-5">
+        <TooltipWrapper side="top" class="ml-5">
             <template #content>
                 <span>{{ t('dialog.user.info.last_join') }} <Timer :epoch="lastJoin" /></span>
             </template>
             <el-icon style="display: inline-block"><Location /></el-icon>
-        </el-tooltip>
+        </TooltipWrapper>
     </span>
 </template>
 
diff --git a/src/components/Launch.vue b/src/components/Launch.vue
index ec87931e..0c400448 100644
--- a/src/components/Launch.vue
+++ b/src/components/Launch.vue
@@ -1,8 +1,8 @@
 <template>
     <div v-if="isVisible" class="inline-block">
-        <el-tooltip placement="top" :content="t('dialog.user.info.launch_invite_tooltip')"
+        <TooltipWrapper side="top" :content="t('dialog.user.info.launch_invite_tooltip')"
             ><el-button @click="confirm" size="small" :icon="SwitchButton" circle />
-        </el-tooltip>
+        </TooltipWrapper>
     </div>
 </template>
 
diff --git a/src/components/Location.vue b/src/components/Location.vue
index 6fc3c620..b5838080 100644
--- a/src/components/Location.vue
+++ b/src/components/Location.vue
@@ -3,11 +3,11 @@
         <div v-if="!text" class="transparent">-</div>
         <div v-show="text" class="flex items-center">
             <div v-if="region" :class="['flags', 'mr-1.5', region]"></div>
-            <el-tooltip
+            <TooltipWrapper
                 :content="`${t('dialog.new_instance.instance_id')}: #${instanceName}`"
                 :disabled="!instanceName || showInstanceIdInLocation"
-                :show-after="300"
-                placement="top">
+                :delay-duration="300"
+                side="top">
                 <div
                     :class="['x-location', { 'x-link': link && location !== 'private' && location !== 'offline' }]"
                     class="inline-flex min-w-0 flex-nowrap items-center overflow-hidden"
@@ -21,10 +21,10 @@
                         ({{ groupName }})
                     </span>
                 </div>
-            </el-tooltip>
-            <el-tooltip v-if="isClosed" :content="t('dialog.user.info.instance_closed')">
+            </TooltipWrapper>
+            <TooltipWrapper v-if="isClosed" :content="t('dialog.user.info.instance_closed')">
                 <el-icon :class="['inline-block', 'ml-5']" style="color: lightcoral"><WarnTriangleFilled /></el-icon>
-            </el-tooltip>
+            </TooltipWrapper>
             <el-icon v-if="strict" :class="['inline-block', 'ml-5']"><Lock /></el-icon>
         </div>
     </div>
diff --git a/src/components/LocationWorld.vue b/src/components/LocationWorld.vue
index 02402507..a37ddf57 100644
--- a/src/components/LocationWorld.vue
+++ b/src/components/LocationWorld.vue
@@ -6,9 +6,9 @@
             <span> {{ accessTypeName }} #{{ instanceName }}</span>
         </span>
         <span v-if="groupName" @click="showGroupDialog" class="x-link">({{ groupName }})</span>
-        <el-tooltip v-if="isClosed" :content="t('dialog.user.info.instance_closed')">
+        <TooltipWrapper v-if="isClosed" :content="t('dialog.user.info.instance_closed')">
             <el-icon :class="['inline-block', 'ml-5']" style="color: lightcoral"><WarnTriangleFilled /></el-icon>
-        </el-tooltip>
+        </TooltipWrapper>
         <el-icon v-if="strict" style="display: inline-block; margin-left: 5px"><Lock /></el-icon>
     </span>
 </template>
diff --git a/src/components/NavMenu.vue b/src/components/NavMenu.vue
index 65bbc594..4cde08c0 100644
--- a/src/components/NavMenu.vue
+++ b/src/components/NavMenu.vue
@@ -60,12 +60,12 @@
             </div>
 
             <div class="nav-menu-container-bottom mb-4">
-                <el-tooltip
+                <TooltipWrapper
                     v-if="branch === 'Nightly'"
-                    :show-after="150"
+                    :delay-duration="150"
                     :content="'Feedback'"
                     :disabled="!isCollapsed"
-                    placement="right">
+                    side="right">
                     <div
                         class="bottom-button"
                         id="feedback"
@@ -73,7 +73,7 @@
                         <i class="ri-feedback-line"></i>
                         <span v-show="!isCollapsed" class="bottom-button__label">Feedback</span>
                     </div>
-                </el-tooltip>
+                </TooltipWrapper>
 
                 <el-popover
                     v-model:visible="supportMenuVisible"
@@ -110,10 +110,10 @@
                     </div>
                     <template #reference>
                         <div>
-                            <el-tooltip
-                                :show-after="150"
+                            <TooltipWrapper
+                                :delay-duration="150"
                                 :content="t('nav_tooltip.help_support')"
-                                placement="right"
+                                side="right"
                                 :disabled="!isCollapsed">
                                 <div class="bottom-button">
                                     <i class="ri-question-line"></i>
@@ -121,7 +121,7 @@
                                         t('nav_tooltip.help_support')
                                     }}</span>
                                 </div>
-                            </el-tooltip>
+                            </TooltipWrapper>
                         </div>
                     </template>
                 </el-popover>
@@ -238,18 +238,18 @@
                         </div>
                     </template>
                 </el-popover>
-                <el-tooltip
-                    :show-after="150"
+                <TooltipWrapper
+                    :delay-duration="150"
                     :content="t('nav_tooltip.expand_menu')"
                     :disabled="!isCollapsed"
-                    placement="right">
+                    side="right">
                     <div class="bottom-button" @click="toggleNavCollapse">
                         <i class="ri-side-bar-line"></i>
                         <span v-show="!isCollapsed" class="bottom-button__label">{{
                             t('nav_tooltip.collapse_menu')
                         }}</span>
                     </div>
-                </el-tooltip>
+                </TooltipWrapper>
             </div>
         </template>
     </div>
diff --git a/src/components/dialogs/AvatarDialog/AvatarDialog.vue b/src/components/dialogs/AvatarDialog/AvatarDialog.vue
index cee5a160..912f18d1 100644
--- a/src/components/dialogs/AvatarDialog/AvatarDialog.vue
+++ b/src/components/dialogs/AvatarDialog/AvatarDialog.vue
@@ -47,7 +47,7 @@
                                 style="margin-right: 5px; margin-top: 5px"
                                 >{{ t('dialog.avatar.tags.private') }}</el-tag
                             >
-                            <el-tooltip v-if="avatarDialog.isPC" placement="top" content="PC">
+                            <TooltipWrapper v-if="avatarDialog.isPC" side="top" content="PC">
                                 <el-tag
                                     class="x-tag-platform-pc"
                                     type="info"
@@ -66,8 +66,8 @@
                                         >{{ avatarDialog.bundleSizes['standalonewindows'].fileSize }}</span
                                     >
                                 </el-tag>
-                            </el-tooltip>
-                            <el-tooltip v-if="avatarDialog.isQuest" placement="top" content="Android">
+                            </TooltipWrapper>
+                            <TooltipWrapper v-if="avatarDialog.isQuest" side="top" content="Android">
                                 <el-tag
                                     class="x-tag-platform-quest"
                                     type="info"
@@ -86,8 +86,8 @@
                                         >{{ avatarDialog.bundleSizes['android'].fileSize }}</span
                                     >
                                 </el-tag>
-                            </el-tooltip>
-                            <el-tooltip v-if="avatarDialog.isIos" placement="top" content="iOS">
+                            </TooltipWrapper>
+                            <TooltipWrapper v-if="avatarDialog.isIos" side="top" content="iOS">
                                 <el-tag
                                     class="x-tag-platform-ios"
                                     type="info"
@@ -106,7 +106,7 @@
                                         >{{ avatarDialog.bundleSizes['ios'].fileSize }}</span
                                     >
                                 </el-tag>
-                            </el-tooltip>
+                            </TooltipWrapper>
                             <el-tag
                                 v-if="avatarDialog.inCache"
                                 class="x-link"
@@ -205,9 +205,9 @@
                         </div>
                     </div>
                     <div style="flex: none; margin-left: 10px">
-                        <el-tooltip
+                        <TooltipWrapper
                             v-if="avatarDialog.inCache"
-                            placement="top"
+                            side="top"
                             :content="t('dialog.avatar.actions.delete_cache_tooltip')">
                             <el-button
                                 :icon="Delete"
@@ -215,10 +215,10 @@
                                 circle
                                 :disabled="isGameRunning && avatarDialog.cacheLocked"
                                 @click="deleteVRChatCache(avatarDialog.ref)"></el-button>
-                        </el-tooltip>
-                        <el-tooltip
+                        </TooltipWrapper>
+                        <TooltipWrapper
                             v-if="avatarDialog.isFavorite"
-                            placement="top"
+                            side="top"
                             :content="t('dialog.avatar.actions.favorite_tooltip')">
                             <el-button
                                 type="warning"
@@ -227,8 +227,8 @@
                                 circle
                                 style="margin-left: 5px"
                                 @click="avatarDialogCommand('Add Favorite')"></el-button>
-                        </el-tooltip>
-                        <el-tooltip v-else placement="top" :content="t('dialog.avatar.actions.favorite_tooltip')">
+                        </TooltipWrapper>
+                        <TooltipWrapper v-else side="top" :content="t('dialog.avatar.actions.favorite_tooltip')">
                             <el-button
                                 type="default"
                                 :icon="Star"
@@ -236,8 +236,8 @@
                                 circle
                                 style="margin-left: 5px"
                                 @click="avatarDialogCommand('Add Favorite')"></el-button>
-                        </el-tooltip>
-                        <el-tooltip placement="top" :content="t('dialog.avatar.actions.select')">
+                        </TooltipWrapper>
+                        <TooltipWrapper side="top" :content="t('dialog.avatar.actions.select')">
                             <el-button
                                 type="default"
                                 :icon="Check"
@@ -246,7 +246,7 @@
                                 :disabled="currentUser.currentAvatar === avatarDialog.id"
                                 style="margin-left: 5px"
                                 @click="selectAvatarWithoutConfirmation(avatarDialog.id)"></el-button>
-                        </el-tooltip>
+                        </TooltipWrapper>
                         <el-dropdown trigger="click" style="margin-left: 5px" @command="avatarDialogCommand">
                             <el-button
                                 :type="avatarDialog.isBlocked ? 'danger' : 'default'"
@@ -452,7 +452,7 @@
                                 <span class="name">{{ t('dialog.avatar.info.id') }}</span>
                                 <span class="extra"
                                     >{{ avatarDialog.id
-                                    }}<el-tooltip placement="top" :content="t('dialog.avatar.info.id_tooltip')">
+                                    }}<TooltipWrapper side="top" :content="t('dialog.avatar.info.id_tooltip')">
                                         <el-dropdown trigger="click" size="small" style="margin-left: 5px">
                                             <el-button
                                                 type="default"
@@ -471,7 +471,7 @@
                                                 </el-dropdown-menu>
                                             </template>
                                         </el-dropdown>
-                                    </el-tooltip></span
+                                    </TooltipWrapper></span
                                 >
                             </div>
                         </div>
@@ -506,9 +506,9 @@
                             <div class="detail">
                                 <span class="name"
                                     >{{ t('dialog.avatar.info.time_spent')
-                                    }}<el-tooltip placement="top" :content="t('dialog.world.info.accuracy_notice')">
-                                        <el-icon style="margin-left: 3px"><Warning /></el-icon></el-tooltip
-                                ></span>
+                                    }}<TooltipWrapper side="top" :content="t('dialog.world.info.accuracy_notice')">
+                                        <el-icon style="margin-left: 3px"><Warning /></el-icon>
+                                    </TooltipWrapper></span>
 
                                 <span v-if="timeSpent === 0" class="extra">-</span>
                                 <span v-else class="extra">{{ timeToText(timeSpent) }}</span>
diff --git a/src/components/dialogs/GroupDialog/GroupDialog.vue b/src/components/dialogs/GroupDialog/GroupDialog.vue
index c0bbb165..5c7352fa 100644
--- a/src/components/dialogs/GroupDialog/GroupDialog.vue
+++ b/src/components/dialogs/GroupDialog/GroupDialog.vue
@@ -27,7 +27,7 @@
                             style="font-family: monospace; font-size: 12px; margin-right: 5px">
                             {{ groupDialog.ref.shortCode }}.{{ groupDialog.ref.discriminator }}
                         </span>
-                        <el-tooltip v-for="item in groupDialog.ref.$languages" :key="item.key" placement="top">
+                        <TooltipWrapper v-for="item in groupDialog.ref.$languages" :key="item.key" side="top">
                             <template #content>
                                 <span>{{ item.value }} ({{ item.key }})</span>
                             </template>
@@ -35,7 +35,7 @@
                                 class="flags"
                                 :class="languageClass(item.key)"
                                 style="display: inline-block; margin-right: 5px"></span>
-                        </el-tooltip>
+                        </TooltipWrapper>
                         <div style="margin-top: 5px">
                             <span
                                 class="x-link x-grey"
@@ -166,9 +166,9 @@
                     </div>
                     <div style="flex: none; margin-left: 10px">
                         <template v-if="groupDialog.inGroup && groupDialog.ref?.myMember">
-                            <el-tooltip
+                            <TooltipWrapper
                                 v-if="groupDialog.ref.myMember?.isRepresenting"
-                                placement="top"
+                                side="top"
                                 :content="t('dialog.group.actions.unrepresent_tooltip')">
                                 <el-button
                                     type="warning"
@@ -177,8 +177,8 @@
                                     circle
                                     style="margin-left: 5px"
                                     @click="clearGroupRepresentation(groupDialog.id)"></el-button>
-                            </el-tooltip>
-                            <el-tooltip v-else placement="top" :content="t('dialog.group.actions.represent_tooltip')">
+                            </TooltipWrapper>
+                            <TooltipWrapper v-else side="top" :content="t('dialog.group.actions.represent_tooltip')">
                                 <span>
                                     <el-button
                                         type="default"
@@ -189,11 +189,11 @@
                                         :disabled="groupDialog.ref.privacy === 'private'"
                                         @click="setGroupRepresentation(groupDialog.id)"></el-button>
                                 </span>
-                            </el-tooltip>
+                            </TooltipWrapper>
                         </template>
                         <template v-else-if="groupDialog.ref.myMember?.membershipStatus === 'requested'">
-                            <el-tooltip
-                                placement="top"
+                            <TooltipWrapper
+                                side="top"
                                 :content="t('dialog.group.actions.cancel_join_request_tooltip')">
                                 <span>
                                     <el-button
@@ -204,10 +204,10 @@
                                         style="margin-left: 5px"
                                         @click="cancelGroupRequest(groupDialog.id)"></el-button>
                                 </span>
-                            </el-tooltip>
+                            </TooltipWrapper>
                         </template>
                         <template v-else-if="groupDialog.ref.myMember?.membershipStatus === 'invited'">
-                            <el-tooltip placement="top" :content="t('dialog.group.actions.pending_request_tooltip')">
+                            <TooltipWrapper side="top" :content="t('dialog.group.actions.pending_request_tooltip')">
                                 <span>
                                     <el-button
                                         type="default"
@@ -217,12 +217,12 @@
                                         style="margin-left: 5px"
                                         @click="joinGroup(groupDialog.id)"></el-button>
                                 </span>
-                            </el-tooltip>
+                            </TooltipWrapper>
                         </template>
                         <template v-else>
-                            <el-tooltip
+                            <TooltipWrapper
                                 v-if="groupDialog.ref.joinState === 'request'"
-                                placement="top"
+                                side="top"
                                 :content="t('dialog.group.actions.request_join_tooltip')">
                                 <el-button
                                     type="default"
@@ -231,10 +231,10 @@
                                     circle
                                     style="margin-left: 5px"
                                     @click="joinGroup(groupDialog.id)"></el-button>
-                            </el-tooltip>
-                            <el-tooltip
+                            </TooltipWrapper>
+                            <TooltipWrapper
                                 v-if="groupDialog.ref.joinState === 'invite'"
-                                placement="top"
+                                side="top"
                                 :content="t('dialog.group.actions.invite_required_tooltip')">
                                 <span>
                                     <el-button
@@ -245,10 +245,10 @@
                                         circle
                                         style="margin-left: 5px"></el-button>
                                 </span>
-                            </el-tooltip>
-                            <el-tooltip
+                            </TooltipWrapper>
+                            <TooltipWrapper
                                 v-if="groupDialog.ref.joinState === 'open'"
-                                placement="top"
+                                side="top"
                                 :content="t('dialog.group.actions.join_group_tooltip')">
                                 <el-button
                                     type="default"
@@ -257,7 +257,7 @@
                                     circle
                                     style="margin-left: 5px"
                                     @click="joinGroup(groupDialog.id)"></el-button>
-                            </el-tooltip>
+                            </TooltipWrapper>
                         </template>
                         <el-dropdown trigger="click" style="margin-left: 5px" @command="groupDialogCommand">
                             <el-button
@@ -378,14 +378,14 @@
                             <div style="margin: 5px 0">
                                 <Location :location="room.tag" style="display: inline-block" />
                                 <InviteYourself :location="room.tag" style="margin-left: 5px" />
-                                <el-tooltip placement="top" content="Refresh player count">
+                                <TooltipWrapper side="top" content="Refresh player count">
                                     <el-button
                                         size="small"
                                         :icon="Refresh"
                                         style="margin-left: 5px"
                                         circle
                                         @click="refreshInstancePlayerCount(room.tag)" />
-                                </el-tooltip>
+                                </TooltipWrapper>
                                 <LastJoin :location="room.tag" :currentlocation="lastLocation.location" />
                                 <InstanceInfo
                                     :location="room.tag"
@@ -457,7 +457,7 @@
                                     v-if="groupDialog.announcement.id"
                                     class="extra"
                                     style="float: right; margin-left: 5px">
-                                    <el-tooltip v-if="groupDialog.announcement.roleIds.length" placement="top">
+                                    <TooltipWrapper v-if="groupDialog.announcement.roleIds.length" side="top">
                                         <template #content>
                                             <span>{{ t('dialog.group.posts.visibility') }}</span>
                                             <br />
@@ -475,7 +475,7 @@
                                             </template>
                                         </template>
                                         <el-icon style="margin-right: 5px"><View /></el-icon>
-                                    </el-tooltip>
+                                    </TooltipWrapper>
                                     <DisplayName
                                         :userid="groupDialog.announcement.authorId"
                                         style="margin-right: 5px" />
@@ -483,7 +483,7 @@
                                         ({{ t('dialog.group.posts.edited_by') }}
                                         <DisplayName :userid="groupDialog.announcement.editorId" />)
                                     </span>
-                                    <el-tooltip placement="bottom">
+                                    <TooltipWrapper side="bottom">
                                         <template #content>
                                             <span
                                                 >{{ t('dialog.group.posts.created_at') }}
@@ -504,9 +504,9 @@
                                             </template>
                                         </template>
                                         <Timer :epoch="Date.parse(groupDialog.announcement.updatedAt)" />
-                                    </el-tooltip>
+                                    </TooltipWrapper>
                                     <template v-if="hasGroupPermission(groupDialog.ref, 'group-announcement-manage')">
-                                        <el-tooltip placement="top" :content="t('dialog.group.posts.edit_tooltip')">
+                                        <TooltipWrapper side="top" :content="t('dialog.group.posts.edit_tooltip')">
                                             <el-button
                                                 text
                                                 :icon="Edit"
@@ -515,15 +515,15 @@
                                                 @click="
                                                     showGroupPostEditDialog(groupDialog.id, groupDialog.announcement)
                                                 " />
-                                        </el-tooltip>
-                                        <el-tooltip placement="top" :content="t('dialog.group.posts.delete_tooltip')">
+                                        </TooltipWrapper>
+                                        <TooltipWrapper side="top" :content="t('dialog.group.posts.delete_tooltip')">
                                             <el-button
                                                 text
                                                 :icon="Delete"
                                                 size="small"
                                                 style="margin-left: 5px; padding: 0"
                                                 @click="confirmDeleteGroupPost(groupDialog.announcement)" />
-                                        </el-tooltip>
+                                        </TooltipWrapper>
                                     </template>
                                 </div>
                             </div>
@@ -595,19 +595,19 @@
                                 <span class="extra">{{ formatDateFilter(groupDialog.ref.createdAt, 'long') }}</span>
                             </div>
                         </div>
-                        <el-tooltip placement="top" :content="t('dialog.user.info.open_previous_instance')">
+                        <TooltipWrapper side="top" :content="t('dialog.user.info.open_previous_instance')">
                             <div class="x-friend-item" @click="showPreviousInstancesGroupDialog(groupDialog.ref)">
                                 <div class="detail">
                                     <span class="name">
                                         {{ t('dialog.group.info.last_visited') }}
-                                        <el-tooltip placement="top" :content="t('dialog.user.info.accuracy_notice')">
+                                        <TooltipWrapper side="top" :content="t('dialog.user.info.accuracy_notice')">
                                             <el-icon style="margin-left: 3px"><Warning /></el-icon>
-                                        </el-tooltip>
+                                        </TooltipWrapper>
                                     </span>
                                     <span class="extra">{{ formatDateFilter(groupDialog.lastVisit, 'long') }}</span>
                                 </div>
                             </div>
-                        </el-tooltip>
+                        </TooltipWrapper>
                         <div class="x-friend-item" style="cursor: default">
                             <div class="detail">
                                 <span class="name">{{ t('dialog.group.info.links') }}</span>
@@ -616,7 +616,7 @@
                                     style="margin-top: 5px"
                                     class="flex">
                                     <template v-for="(link, index) in groupDialog.ref.links" :key="index">
-                                        <el-tooltip v-if="link">
+                                        <TooltipWrapper v-if="link">
                                             <template #content>
                                                 <span v-text="link" />
                                             </template>
@@ -631,7 +631,7 @@
                                                 "
                                                 @click.stop="openExternalLink(link)"
                                                 loading="lazy" />
-                                        </el-tooltip>
+                                        </TooltipWrapper>
                                     </template>
                                 </div>
                                 <div v-else class="extra">-</div>
@@ -642,15 +642,15 @@
                                 <span class="name">{{ t('dialog.group.info.url') }}</span>
                                 <span class="extra"
                                     >{{ groupDialog.ref.$url }}
-                                    <el-tooltip placement="top" :content="t('dialog.group.info.url_tooltip')">
+                                    <TooltipWrapper side="top" :content="t('dialog.group.info.url_tooltip')">
                                         <el-button
                                             type="default"
                                             size="small"
                                             :icon="CopyDocument"
                                             circle
                                             style="margin-left: 5px"
-                                            @click="copyToClipboard(groupDialog.ref.$url)" /> </el-tooltip
-                                ></span>
+                                            @click="copyToClipboard(groupDialog.ref.$url)" />
+                                    </TooltipWrapper></span>
                             </div>
                         </div>
                         <div class="x-friend-item" style="width: 350px; cursor: default">
@@ -658,15 +658,15 @@
                                 <span class="name">{{ t('dialog.group.info.id') }}</span>
                                 <span class="extra"
                                     >{{ groupDialog.id }}
-                                    <el-tooltip placement="top" :content="t('dialog.group.info.id_tooltip')">
+                                    <TooltipWrapper side="top" :content="t('dialog.group.info.id_tooltip')">
                                         <el-button
                                             type="default"
                                             size="small"
                                             :icon="CopyDocument"
                                             circle
                                             style="margin-left: 5px"
-                                            @click="copyToClipboard(groupDialog.id)" /> </el-tooltip
-                                ></span>
+                                            @click="copyToClipboard(groupDialog.id)" />
+                                    </TooltipWrapper></span>
                             </div>
                         </div>
                         <div
@@ -687,7 +687,7 @@
                                         <span v-if="groupDialog.memberRoles.length === 0" class="extra"> - </span>
                                         <span v-else class="extra">
                                             <template v-for="(role, rIndex) in groupDialog.memberRoles" :key="rIndex">
-                                                <el-tooltip placement="top">
+                                                <TooltipWrapper side="top">
                                                     <template #content>
                                                         <span>{{ t('dialog.group.info.role') }} {{ role.name }}</span>
                                                         <br />
@@ -720,7 +720,7 @@
                                                             rIndex < groupDialog.memberRoles.length - 1 ? ', ' : ''
                                                         }}</span
                                                     >
-                                                </el-tooltip>
+                                                </TooltipWrapper>
                                             </template>
                                         </span>
                                     </div>
@@ -777,7 +777,7 @@
                                     >
                                     <br />
                                     <div v-if="post.authorId" class="extra" style="float: right; margin-left: 5px">
-                                        <el-tooltip v-if="post.roleIds.length" placement="top">
+                                        <TooltipWrapper v-if="post.roleIds.length" side="top">
                                             <template #content>
                                                 <span>{{ t('dialog.group.posts.visibility') }}</span>
                                                 <br />
@@ -794,13 +794,13 @@
                                                 </template>
                                             </template>
                                             <el-icon style="margin-right: 5px"><View /></el-icon>
-                                        </el-tooltip>
+                                        </TooltipWrapper>
                                         <DisplayName :userid="post.authorId" style="margin-right: 5px" />
                                         <span v-if="post.editorId" style="margin-right: 5px"
                                             >({{ t('dialog.group.posts.edited_by') }}
                                             <DisplayName :userid="post.editorId" />)</span
                                         >
-                                        <el-tooltip placement="bottom">
+                                        <TooltipWrapper side="bottom">
                                             <template #content>
                                                 <span
                                                     >{{ t('dialog.group.posts.created_at') }}
@@ -815,19 +815,19 @@
                                                 </template>
                                             </template>
                                             <Timer :epoch="Date.parse(post.updatedAt)" />
-                                        </el-tooltip>
+                                        </TooltipWrapper>
                                         <template
                                             v-if="hasGroupPermission(groupDialog.ref, 'group-announcement-manage')">
-                                            <el-tooltip placement="top" :content="t('dialog.group.posts.edit_tooltip')">
+                                            <TooltipWrapper side="top" :content="t('dialog.group.posts.edit_tooltip')">
                                                 <el-button
                                                     text
                                                     :icon="Edit"
                                                     size="small"
                                                     style="margin-left: 5px"
                                                     @click="showGroupPostEditDialog(groupDialog.id, post)" />
-                                            </el-tooltip>
-                                            <el-tooltip
-                                                placement="top"
+                                            </TooltipWrapper>
+                                            <TooltipWrapper
+                                                side="top"
                                                 :content="t('dialog.group.posts.delete_tooltip')">
                                                 <el-button
                                                     text
@@ -835,7 +835,7 @@
                                                     size="small"
                                                     style="margin-left: 5px"
                                                     @click="confirmDeleteGroupPost(post)" />
-                                            </el-tooltip>
+                                            </TooltipWrapper>
                                         </template>
                                     </div>
                                 </div>
@@ -959,13 +959,13 @@
                                         v-text="user.user.displayName" />
                                     <span class="extra">
                                         <template v-if="hasGroupPermission(groupDialog.ref, 'group-members-manage')">
-                                            <el-tooltip
+                                            <TooltipWrapper
                                                 v-if="user.isRepresenting"
-                                                placement="top"
+                                                side="top"
                                                 :content="t('dialog.group.members.representing')">
                                                 <el-icon style="margin-right: 5px"><CollectionTag /></el-icon>
-                                            </el-tooltip>
-                                            <el-tooltip v-if="user.visibility !== 'visible'" placement="top">
+                                            </TooltipWrapper>
+                                            <TooltipWrapper v-if="user.visibility !== 'visible'" side="top">
                                                 <template #content>
                                                     <span
                                                         >{{ t('dialog.group.members.visibility') }}
@@ -973,21 +973,21 @@
                                                     >
                                                 </template>
                                                 <el-icon style="margin-right: 5px"><View /></el-icon>
-                                            </el-tooltip>
-                                            <el-tooltip
+                                            </TooltipWrapper>
+                                            <TooltipWrapper
                                                 v-if="!user.isSubscribedToAnnouncements"
-                                                placement="top"
+                                                side="top"
                                                 :content="t('dialog.group.members.unsubscribed_announcements')">
                                                 <el-icon style="margin-right: 5px"><ChatLineSquare /></el-icon>
-                                            </el-tooltip>
-                                            <el-tooltip v-if="user.managerNotes" placement="top">
+                                            </TooltipWrapper>
+                                            <TooltipWrapper v-if="user.managerNotes" side="top">
                                                 <template #content>
                                                     <span>{{ t('dialog.group.members.manager_notes') }}</span>
                                                     <br />
                                                     <span>{{ user.managerNotes }}</span>
                                                 </template>
                                                 <el-icon style="margin-right: 5px"><Edit /></el-icon>
-                                            </el-tooltip>
+                                            </TooltipWrapper>
                                         </template>
                                         <template v-for="roleId in user.roleIds" :key="roleId">
                                             <template v-for="role in groupDialog.ref.roles" :key="role.id + roleId"
@@ -1020,13 +1020,13 @@
                                         v-text="user.user.displayName" />
                                     <span class="extra">
                                         <template v-if="hasGroupPermission(groupDialog.ref, 'group-members-manage')">
-                                            <el-tooltip
+                                            <TooltipWrapper
                                                 v-if="user.isRepresenting"
-                                                placement="top"
+                                                side="top"
                                                 :content="t('dialog.group.members.representing')">
                                                 <el-icon style="margin-right: 5px"><CollectionTag /></el-icon>
-                                            </el-tooltip>
-                                            <el-tooltip v-if="user.visibility !== 'visible'" placement="top">
+                                            </TooltipWrapper>
+                                            <TooltipWrapper v-if="user.visibility !== 'visible'" side="top">
                                                 <template #content>
                                                     <span
                                                         >{{ t('dialog.group.members.visibility') }}
@@ -1034,21 +1034,21 @@
                                                     >
                                                 </template>
                                                 <el-icon style="margin-right: 5px"><View /></el-icon>
-                                            </el-tooltip>
-                                            <el-tooltip
+                                            </TooltipWrapper>
+                                            <TooltipWrapper
                                                 v-if="!user.isSubscribedToAnnouncements"
-                                                placement="top"
+                                                side="top"
                                                 :content="t('dialog.group.members.unsubscribed_announcements')">
                                                 <el-icon style="margin-right: 5px"><ChatLineSquare /></el-icon>
-                                            </el-tooltip>
-                                            <el-tooltip v-if="user.managerNotes" placement="top">
+                                            </TooltipWrapper>
+                                            <TooltipWrapper v-if="user.managerNotes" side="top">
                                                 <template #content>
                                                     <span>{{ t('dialog.group.members.manager_notes') }}</span>
                                                     <br />
                                                     <span>{{ user.managerNotes }}</span>
                                                 </template>
                                                 <el-icon style="margin-right: 5px"><Edit /></el-icon>
-                                            </el-tooltip>
+                                            </TooltipWrapper>
                                         </template>
                                         <template v-for="roleId in user.roleIds" :key="roleId">
                                             <template v-for="role in groupDialog.ref.roles" :key="roleId + role.id"
diff --git a/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue b/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue
index 1134562f..75932b1c 100644
--- a/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue
+++ b/src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue
@@ -731,12 +731,12 @@
                 style="margin-right: 5px; margin-top: 5px"
                 closable
                 @close="deleteSelectedGroupMember(user)">
-                <el-tooltip v-if="user.membershipStatus !== 'member'" placement="top">
+                <TooltipWrapper v-if="user.membershipStatus !== 'member'" side="top">
                     <template #content>
                         <span>{{ t('dialog.group_member_moderation.user_isnt_in_group') }}</span>
                     </template>
                     <el-icon style="margin-left: 3px; display: inline-block"><Warning /></el-icon>
-                </el-tooltip>
+                </TooltipWrapper>
                 <span v-text="user.user?.displayName || user.userId" style="font-weight: bold; margin-left: 5px"></span>
             </el-tag>
             <br />
diff --git a/src/components/dialogs/LaunchDialog.vue b/src/components/dialogs/LaunchDialog.vue
index 7d95e016..de87333b 100644
--- a/src/components/dialogs/LaunchDialog.vue
+++ b/src/components/dialogs/LaunchDialog.vue
@@ -7,35 +7,35 @@
                     size="small"
                     style="width: 230px"
                     @click="$event.target.tagName === 'INPUT' && $event.target.select()" />
-                <el-tooltip placement="right" :content="t('dialog.launch.copy_tooltip')">
+                <TooltipWrapper side="right" :content="t('dialog.launch.copy_tooltip')">
                     <el-button
                         size="small"
                         :icon="CopyDocument"
                         style="margin-left: 5px"
                         circle
                         @click="copyInstanceMessage(launchDialog.url)" />
-                </el-tooltip>
+                </TooltipWrapper>
             </el-form-item>
             <el-form-item v-if="launchDialog.shortUrl">
                 <template #label>
                     <span>{{ t('dialog.launch.short_url') }}</span>
-                    <el-tooltip placement="top" :content="t('dialog.launch.short_url_notice')">
+                    <TooltipWrapper side="top" :content="t('dialog.launch.short_url_notice')">
                         <el-icon style="display: inline-block; margin-left: 5px"><Warning /></el-icon>
-                    </el-tooltip>
+                    </TooltipWrapper>
                 </template>
                 <el-input
                     v-model="launchDialog.shortUrl"
                     size="small"
                     style="width: 230px"
                     @click="$event.target.tagName === 'INPUT' && $event.target.select()" />
-                <el-tooltip placement="right" :content="t('dialog.launch.copy_tooltip')">
+                <TooltipWrapper side="right" :content="t('dialog.launch.copy_tooltip')">
                     <el-button
                         size="small"
                         :icon="CopyDocument"
                         style="display: inline-block; margin-left: 5px"
                         circle
                         @click="copyInstanceMessage(launchDialog.shortUrl)" />
-                </el-tooltip>
+                </TooltipWrapper>
             </el-form-item>
             <el-form-item :label="t('dialog.launch.location')">
                 <el-input
@@ -43,14 +43,14 @@
                     size="small"
                     style="width: 230px"
                     @click="$event.target.tagName === 'INPUT' && $event.target.select()" />
-                <el-tooltip placement="right" :content="t('dialog.launch.copy_tooltip')">
+                <TooltipWrapper side="right" :content="t('dialog.launch.copy_tooltip')">
                     <el-button
                         size="small"
                         :icon="CopyDocument"
                         style="display: inline-block; margin-left: 5px"
                         circle
                         @click="copyInstanceMessage(launchDialog.location)" />
-                </el-tooltip>
+                </TooltipWrapper>
             </el-form-item>
         </el-form>
         <template #footer>
diff --git a/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesInfoDialog.vue b/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesInfoDialog.vue
index 2194bda6..95c1b5e5 100644
--- a/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesInfoDialog.vue
+++ b/src/components/dialogs/PreviousInstancesDialog/PreviousInstancesInfoDialog.vue
@@ -18,23 +18,23 @@
         <DataTable :loading="loading" v-bind="dataTable" style="margin-top: 10px">
             <el-table-column :label="t('table.previous_instances.date')" prop="created_at" sortable width="130">
                 <template #default="scope">
-                    <el-tooltip placement="left">
+                    <TooltipWrapper side="left">
                         <template #content>
                             <span>{{ formatDateFilter(scope.row.created_at, 'long') }}</span>
                         </template>
                         <span>{{ formatDateFilter(scope.row.created_at, 'short') }}</span>
-                    </el-tooltip>
+                    </TooltipWrapper>
                 </template>
             </el-table-column>
             <el-table-column :label="t('table.gameLog.icon')" prop="isFriend" width="70" align="center">
                 <template #default="scope">
                     <template v-if="gameLogIsFriend(scope.row)">
-                        <el-tooltip v-if="gameLogIsFavorite(scope.row)" placement="top" content="Favorite">
+                        <TooltipWrapper v-if="gameLogIsFavorite(scope.row)" side="top" content="Favorite">
                             <span>⭐</span>
-                        </el-tooltip>
-                        <el-tooltip v-else placement="top" content="Friend">
+                        </TooltipWrapper>
+                        <TooltipWrapper v-else side="top" content="Friend">
                             <span>💚</span>
-                        </el-tooltip>
+                        </TooltipWrapper>
                     </template>
                     <span v-else></span>
                 </template>
diff --git a/src/components/dialogs/UserDialog/UserActionDropdown.vue b/src/components/dialogs/UserDialog/UserActionDropdown.vue
index d506a806..acc59246 100644
--- a/src/components/dialogs/UserDialog/UserActionDropdown.vue
+++ b/src/components/dialogs/UserDialog/UserActionDropdown.vue
@@ -1,9 +1,9 @@
 <template>
     <div style="flex: none">
         <template v-if="(currentUser.id !== userDialog.ref.id && userDialog.isFriend) || userDialog.isFavorite">
-            <el-tooltip
+            <TooltipWrapper
                 v-if="userDialog.isFavorite"
-                placement="top"
+                side="top"
                 :content="t('dialog.user.actions.unfavorite_tooltip')">
                 <el-button
                     type="warning"
@@ -11,15 +11,15 @@
                     size="large"
                     circle
                     @click="userDialogCommand('Add Favorite')"></el-button>
-            </el-tooltip>
-            <el-tooltip v-else placement="top" :content="t('dialog.user.actions.favorite_tooltip')">
+            </TooltipWrapper>
+            <TooltipWrapper v-else side="top" :content="t('dialog.user.actions.favorite_tooltip')">
                 <el-button
                     type="default"
                     :icon="Star"
                     size="large"
                     circle
                     @click="userDialogCommand('Add Favorite')"></el-button>
-            </el-tooltip>
+            </TooltipWrapper>
         </template>
         <el-dropdown trigger="click" @command="onCommand">
             <el-button
diff --git a/src/components/dialogs/UserDialog/UserDialog.vue b/src/components/dialogs/UserDialog/UserDialog.vue
index 0ddababf..95b762bf 100644
--- a/src/components/dialogs/UserDialog/UserDialog.vue
+++ b/src/components/dialogs/UserDialog/UserDialog.vue
@@ -33,14 +33,14 @@
                                         :location="userDialog.$location.tag"
                                         :shortname="userDialog.$location.shortName"
                                         style="margin-left: 5px" />
-                                    <el-tooltip placement="top" :content="t('dialog.user.info.refresh_instance_info')"
+                                    <TooltipWrapper side="top" :content="t('dialog.user.info.refresh_instance_info')"
                                         ><el-button
                                             size="small"
                                             :icon="Refresh"
                                             style="margin-left: 5px"
                                             circle
                                             @click="refreshInstancePlayerCount(userDialog.$location.tag)"></el-button>
-                                    </el-tooltip>
+                                    </TooltipWrapper>
                                     <LastJoin
                                         :location="userDialog.$location.tag"
                                         :currentlocation="lastLocation.location" />
@@ -158,14 +158,14 @@
                                         :userid="userDialog.id"
                                         :avatartags="userDialog.ref.currentAvatarTags"
                                         style="display: inline-block" />
-                                    <el-tooltip
+                                    <TooltipWrapper
                                         v-if="
                                             userDialog.ref.profilePicOverride && !userDialog.ref.currentAvatarImageUrl
                                         "
-                                        placement="top"
+                                        side="top"
                                         :content="t('dialog.user.info.vrcplus_hides_avatar')">
                                         <el-icon><Warning /></el-icon>
-                                    </el-tooltip>
+                                    </TooltipWrapper>
                                 </div>
                             </div>
                         </div>
@@ -253,7 +253,7 @@
                                         @click="showBioDialog"></el-button>
                                 </div>
                                 <div style="margin-top: 5px" class="flex items-center">
-                                    <el-tooltip v-for="(link, index) in userDialog.ref.bioLinks" :key="index">
+                                    <TooltipWrapper v-for="(link, index) in userDialog.ref.bioLinks" :key="index">
                                         <template #content>
                                             <span v-text="link"></span>
                                         </template>
@@ -269,7 +269,7 @@
                                             "
                                             @click.stop="openExternalLink(link)"
                                             loading="lazy" />
-                                    </el-tooltip>
+                                    </TooltipWrapper>
                                 </div>
                             </div>
                         </div>
@@ -278,9 +278,9 @@
                                 <div class="detail">
                                     <span class="name">
                                         {{ t('dialog.user.info.last_seen') }}
-                                        <el-tooltip placement="top" :content="t('dialog.user.info.accuracy_notice')">
+                                        <TooltipWrapper side="top" :content="t('dialog.user.info.accuracy_notice')">
                                             <el-icon style="margin-left: 3px"><Warning /></el-icon>
-                                        </el-tooltip>
+                                        </TooltipWrapper>
                                     </span>
                                     <span class="extra">{{ formatDateFilter(userDialog.lastSeen, 'long') }}</span>
                                 </div>
@@ -293,18 +293,18 @@
                                         style="display: flex; justify-content: space-between; align-items: center">
                                         <div>
                                             {{ t('dialog.user.info.join_count') }}
-                                            <el-tooltip
-                                                placement="top"
+                                            <TooltipWrapper
+                                                side="top"
                                                 :content="t('dialog.user.info.accuracy_notice')">
                                                 <el-icon style="margin-left: 3px"><Warning /></el-icon>
-                                            </el-tooltip>
+                                            </TooltipWrapper>
                                         </div>
 
-                                        <el-tooltip
-                                            placement="top"
+                                        <TooltipWrapper
+                                            side="top"
                                             :content="t('dialog.user.info.open_previous_instance')">
                                             <el-icon style="margin-right: 16px"><MoreFilled /></el-icon>
-                                        </el-tooltip>
+                                        </TooltipWrapper>
                                     </div>
                                     <span v-if="userDialog.joinCount === 0" class="extra">-</span>
                                     <span v-else class="extra" v-text="userDialog.joinCount"></span>
@@ -315,9 +315,9 @@
                                 <div class="detail">
                                     <span class="name">
                                         {{ t('dialog.user.info.time_together') }}
-                                        <el-tooltip placement="top" :content="t('dialog.user.info.accuracy_notice')">
+                                        <TooltipWrapper side="top" :content="t('dialog.user.info.accuracy_notice')">
                                             <el-icon style="margin-left: 3px"><Warning /></el-icon>
-                                        </el-tooltip>
+                                        </TooltipWrapper>
                                     </span>
                                     <span v-if="userDialog.timeSpent === 0" class="extra">-</span>
                                     <span v-else class="extra">{{ timeToText(userDialog.timeSpent) }}</span>
@@ -325,28 +325,28 @@
                             </div>
                         </template>
                         <template v-else>
-                            <el-tooltip
+                            <TooltipWrapper
                                 :disabled="currentUser.id !== userDialog.id"
-                                placement="top"
+                                side="top"
                                 :content="t('dialog.user.info.open_previous_instance')">
                                 <div class="x-friend-item" @click="showPreviousInstancesUserDialog(userDialog.ref)">
                                     <div class="detail">
                                         <span class="name">
                                             {{ t('dialog.user.info.play_time') }}
-                                            <el-tooltip
-                                                placement="top"
+                                            <TooltipWrapper
+                                                side="top"
                                                 :content="t('dialog.user.info.accuracy_notice')">
                                                 <el-icon style="margin-left: 3px"><Warning /></el-icon>
-                                            </el-tooltip>
+                                            </TooltipWrapper>
                                         </span>
                                         <span v-if="userDialog.timeSpent === 0" class="extra">-</span>
                                         <span v-else class="extra">{{ timeToText(userDialog.timeSpent) }}</span>
                                     </div>
                                 </div>
-                            </el-tooltip>
+                            </TooltipWrapper>
                         </template>
                         <div class="x-friend-item" style="cursor: default">
-                            <el-tooltip :placement="currentUser.id !== userDialog.id ? 'bottom' : 'top'">
+                            <TooltipWrapper :side="currentUser.id !== userDialog.id ? 'bottom' : 'top'">
                                 <template #content>
                                     <span>{{ formatDateFilter(userOnlineForTimestamp(userDialog), 'short') }}</span>
                                 </template>
@@ -355,22 +355,22 @@
                                         v-if="userDialog.ref.state === 'online' && userDialog.ref.$online_for"
                                         class="name">
                                         {{ t('dialog.user.info.online_for') }}
-                                        <el-tooltip placement="top" :content="t('dialog.user.info.accuracy_notice')">
+                                        <TooltipWrapper side="top" :content="t('dialog.user.info.accuracy_notice')">
                                             <el-icon style="margin-left: 3px"><Warning /></el-icon>
-                                        </el-tooltip>
+                                        </TooltipWrapper>
                                     </span>
                                     <span v-else class="name">
                                         {{ t('dialog.user.info.offline_for') }}
-                                        <el-tooltip placement="top" :content="t('dialog.user.info.accuracy_notice')">
+                                        <TooltipWrapper side="top" :content="t('dialog.user.info.accuracy_notice')">
                                             <el-icon style="margin-left: 3px"><Warning /></el-icon>
-                                        </el-tooltip>
+                                        </TooltipWrapper>
                                     </span>
                                     <span class="extra">{{ userOnlineFor(userDialog.ref) }}</span>
                                 </div>
-                            </el-tooltip>
+                            </TooltipWrapper>
                         </div>
                         <div class="x-friend-item" style="cursor: default">
-                            <el-tooltip :placement="currentUser.id !== userDialog.id ? 'bottom' : 'top'">
+                            <TooltipWrapper :side="currentUser.id !== userDialog.id ? 'bottom' : 'top'">
                                 <template #content>
                                     <span
                                         >{{ t('dialog.user.info.last_login') }}
@@ -389,7 +389,7 @@
                                     }}</span>
                                     <span v-else class="extra">-</span>
                                 </div>
-                            </el-tooltip>
+                            </TooltipWrapper>
                         </div>
                         <div class="x-friend-item" style="cursor: default">
                             <div class="detail">
@@ -398,7 +398,7 @@
                             </div>
                         </div>
                         <div v-if="currentUser.id !== userDialog.id" class="x-friend-item" style="cursor: default">
-                            <el-tooltip placement="top" :disabled="!userDialog.dateFriendedInfo.length">
+                            <TooltipWrapper side="top" :disabled="!userDialog.dateFriendedInfo.length">
                                 <template v-if="userDialog.dateFriendedInfo.length" #content>
                                     <template v-for="ref in userDialog.dateFriendedInfo" :key="ref.type">
                                         <span>{{ ref.type }}: {{ formatDateFilter(ref.created_at, 'long') }}</span
@@ -408,19 +408,19 @@
                                 <div class="detail">
                                     <span v-if="userDialog.unFriended" class="name">
                                         {{ t('dialog.user.info.unfriended') }}
-                                        <el-tooltip placement="top" :content="t('dialog.user.info.accuracy_notice')">
+                                        <TooltipWrapper side="top" :content="t('dialog.user.info.accuracy_notice')">
                                             <el-icon style="margin-left: 3px"><Warning /></el-icon>
-                                        </el-tooltip>
+                                        </TooltipWrapper>
                                     </span>
                                     <span v-else class="name">
                                         {{ t('dialog.user.info.friended') }}
-                                        <el-tooltip placement="top" :content="t('dialog.user.info.accuracy_notice')">
+                                        <TooltipWrapper side="top" :content="t('dialog.user.info.accuracy_notice')">
                                             <el-icon style="margin-left: 3px"><Warning /></el-icon>
-                                        </el-tooltip>
+                                        </TooltipWrapper>
                                     </span>
                                     <span class="extra">{{ formatDateFilter(userDialog.dateFriended, 'long') }}</span>
                                 </div>
-                            </el-tooltip>
+                            </TooltipWrapper>
                         </div>
                         <template v-if="currentUser.id === userDialog.id">
                             <div class="x-friend-item" @click="toggleAvatarCopying">
@@ -515,7 +515,7 @@
                                 <span class="name">{{ t('dialog.user.info.id') }}</span>
                                 <span class="extra">
                                     {{ userDialog.id }}
-                                    <el-tooltip placement="top" :content="t('dialog.user.info.id_tooltip')">
+                                    <TooltipWrapper side="top" :content="t('dialog.user.info.id_tooltip')">
                                         <el-dropdown trigger="click" size="small" style="margin-left: 5px" @click.stop>
                                             <el-button
                                                 type="default"
@@ -537,7 +537,7 @@
                                                 </el-dropdown-menu>
                                             </template>
                                         </el-dropdown>
-                                    </el-tooltip>
+                                    </TooltipWrapper>
                                 </span>
                             </div>
                         </div>
@@ -799,13 +799,13 @@
                                     <div class="detail">
                                         <span class="name" v-text="group.name"></span>
                                         <span class="extra">
-                                            <el-tooltip
+                                            <TooltipWrapper
                                                 v-if="group.isRepresenting"
-                                                placement="top"
+                                                side="top"
                                                 :content="t('dialog.group.members.representing')">
                                                 <el-icon style="margin-right: 5px"><CollectionTag /></el-icon>
-                                            </el-tooltip>
-                                            <el-tooltip v-if="group.myMember?.visibility !== 'visible'" placement="top">
+                                            </TooltipWrapper>
+                                            <TooltipWrapper v-if="group.myMember?.visibility !== 'visible'" side="top">
                                                 <template #content>
                                                     <span
                                                         >{{ t('dialog.group.members.visibility') }}
@@ -813,7 +813,7 @@
                                                     >
                                                 </template>
                                                 <el-icon style="margin-right: 5px"><View /></el-icon>
-                                            </el-tooltip>
+                                            </TooltipWrapper>
                                             <span>({{ group.memberCount }})</span>
                                         </span>
                                     </div>
@@ -875,8 +875,8 @@
                                             {{ t('dialog.group.tags.unsubscribed') }}</span
                                         >
                                     </el-button> -->
-                                    <el-tooltip
-                                        placement="right"
+                                    <TooltipWrapper
+                                        side="right"
                                         :content="t('dialog.user.groups.leave_group_tooltip')">
                                         <el-button
                                             v-if="shiftHeld"
@@ -894,7 +894,7 @@
                                             style="margin-left: 5px"
                                             @click.stop="leaveGroupPrompt(group.id)">
                                         </el-button>
-                                    </el-tooltip>
+                                    </TooltipWrapper>
                                 </div>
                             </div>
                         </template>
@@ -922,13 +922,13 @@
                                         <div class="detail">
                                             <span class="name" v-text="group.name"></span>
                                             <span class="extra">
-                                                <el-tooltip
+                                                <TooltipWrapper
                                                     v-if="group.isRepresenting"
-                                                    placement="top"
+                                                    side="top"
                                                     :content="t('dialog.group.members.representing')">
                                                     <el-icon style="margin-right: 5px"><CollectionTag /></el-icon>
-                                                </el-tooltip>
-                                                <el-tooltip v-if="group.memberVisibility !== 'visible'" placement="top">
+                                                </TooltipWrapper>
+                                                <TooltipWrapper v-if="group.memberVisibility !== 'visible'" side="top">
                                                     <template #content>
                                                         <span
                                                             >{{ t('dialog.group.members.visibility') }}
@@ -936,7 +936,7 @@
                                                         >
                                                     </template>
                                                     <el-icon style="margin-right: 5px"><View /></el-icon>
-                                                </el-tooltip>
+                                                </TooltipWrapper>
                                                 <span>({{ group.memberCount }})</span>
                                             </span>
                                         </div>
@@ -965,13 +965,13 @@
                                         <div class="detail">
                                             <span class="name" v-text="group.name"></span>
                                             <span class="extra">
-                                                <el-tooltip
+                                                <TooltipWrapper
                                                     v-if="group.isRepresenting"
-                                                    placement="top"
+                                                    side="top"
                                                     :content="t('dialog.group.members.representing')">
                                                     <el-icon style="margin-right: 5px"><CollectionTag /></el-icon>
-                                                </el-tooltip>
-                                                <el-tooltip v-if="group.memberVisibility !== 'visible'" placement="top">
+                                                </TooltipWrapper>
+                                                <TooltipWrapper v-if="group.memberVisibility !== 'visible'" side="top">
                                                     <template #content>
                                                         <span
                                                             >{{ t('dialog.group.members.visibility') }}
@@ -979,7 +979,7 @@
                                                         >
                                                     </template>
                                                     <el-icon style="margin-right: 5px"><View /></el-icon>
-                                                </el-tooltip>
+                                                </TooltipWrapper>
                                                 <span>({{ group.memberCount }})</span>
                                             </span>
                                         </div>
@@ -1016,13 +1016,13 @@
                                         <div class="detail">
                                             <span class="name" v-text="group.name"></span>
                                             <span class="extra">
-                                                <el-tooltip
+                                                <TooltipWrapper
                                                     v-if="group.isRepresenting"
-                                                    placement="top"
+                                                    side="top"
                                                     :content="t('dialog.group.members.representing')">
                                                     <el-icon style="margin-right: 5px"><CollectionTag /></el-icon>
-                                                </el-tooltip>
-                                                <el-tooltip v-if="group.memberVisibility !== 'visible'" placement="top">
+                                                </TooltipWrapper>
+                                                <TooltipWrapper v-if="group.memberVisibility !== 'visible'" side="top">
                                                     <template #content>
                                                         <span
                                                             >{{ t('dialog.group.members.visibility') }}
@@ -1030,7 +1030,7 @@
                                                         >
                                                     </template>
                                                     <el-icon style="margin-right: 5px"><View /></el-icon>
-                                                </el-tooltip>
+                                                </TooltipWrapper>
                                                 <span>({{ group.memberCount }})</span>
                                             </span>
                                         </div>
diff --git a/src/components/dialogs/UserDialog/UserSummaryHeader.vue b/src/components/dialogs/UserDialog/UserSummaryHeader.vue
index ea3c1eab..23d204df 100644
--- a/src/components/dialogs/UserDialog/UserSummaryHeader.vue
+++ b/src/components/dialogs/UserDialog/UserSummaryHeader.vue
@@ -20,14 +20,14 @@
         <div style="flex: 1; display: flex; align-items: center; margin-left: 15px">
             <div style="flex: 1">
                 <div>
-                    <el-tooltip v-if="userDialog.ref.status" placement="top">
+                    <TooltipWrapper v-if="userDialog.ref.status" side="top">
                         <template #content>
                             <span>{{ getUserStateText(userDialog.ref) }}</span>
                         </template>
                         <i class="x-user-status" :class="userStatusClass(userDialog.ref)"></i>
-                    </el-tooltip>
+                    </TooltipWrapper>
                     <template v-if="userDialog.previousDisplayNames.length > 0">
-                        <el-tooltip placement="bottom">
+                        <TooltipWrapper side="bottom">
                             <template #content>
                                 <span>{{ t('dialog.user.previous_display_names') }}</span>
                                 <div
@@ -41,20 +41,20 @@
                                 </div>
                             </template>
                             <el-icon><CaretBottom /></el-icon>
-                        </el-tooltip>
+                        </TooltipWrapper>
                     </template>
                     <span
                         class="dialog-title"
                         style="margin-left: 5px; margin-right: 5px; cursor: pointer"
                         v-text="userDialog.ref.displayName"
                         @click="copyUserDisplayName(userDialog.ref.displayName)"></span>
-                    <el-tooltip v-if="userDialog.ref.pronouns" placement="top" :content="t('dialog.user.pronouns')">
+                    <TooltipWrapper v-if="userDialog.ref.pronouns" side="top" :content="t('dialog.user.pronouns')">
                         <span
                             class="x-grey"
                             style="margin-right: 5px; font-family: monospace; font-size: 12px"
                             v-text="userDialog.ref.pronouns"></span>
-                    </el-tooltip>
-                    <el-tooltip v-for="item in userDialog.ref.$languages" :key="item.key" placement="top">
+                    </TooltipWrapper>
+                    <TooltipWrapper v-for="item in userDialog.ref.$languages" :key="item.key" side="top">
                         <template #content>
                             <span>{{ item.value }} ({{ item.key }})</span>
                         </template>
@@ -62,7 +62,7 @@
                             class="flags"
                             :class="languageClass(item.key)"
                             style="display: inline-block; margin-right: 5px"></span>
-                    </el-tooltip>
+                    </TooltipWrapper>
                     <template v-if="userDialog.ref.id === currentUser.id">
                         <br />
                         <span
@@ -73,7 +73,7 @@
                     </template>
                 </div>
                 <div style="margin-top: 5px" v-show="!userDialog.loading">
-                    <el-tooltip placement="top" :content="t('dialog.user.tags.trust_level')">
+                    <TooltipWrapper side="top" :content="t('dialog.user.tags.trust_level')">
                         <el-tag
                             type="info"
                             effect="plain"
@@ -83,10 +83,10 @@
                             style="margin-right: 5px; margin-top: 5px">
                             <i class="ri-shield-line"></i> {{ userDialog.ref.$trustLevel }}
                         </el-tag>
-                    </el-tooltip>
-                    <el-tooltip
+                    </TooltipWrapper>
+                    <TooltipWrapper
                         v-if="userDialog.ref.ageVerified && userDialog.ref.ageVerificationStatus"
-                        placement="top"
+                        side="top"
                         :content="t('dialog.user.tags.age_verified')">
                         <el-tag
                             type="info"
@@ -101,10 +101,10 @@
                                 <i class="ri-info-card-line"></i>
                             </template>
                         </el-tag>
-                    </el-tooltip>
-                    <el-tooltip
+                    </TooltipWrapper>
+                    <TooltipWrapper
                         v-if="userDialog.isFriend && userDialog.friend"
-                        placement="top"
+                        side="top"
                         :content="t('dialog.user.tags.friend_number')">
                         <el-tag
                             type="info"
@@ -115,10 +115,10 @@
                             <i class="ri-user-add-line"></i>
                             {{ userDialog.ref.$friendNumber ? userDialog.ref.$friendNumber : '' }}
                         </el-tag>
-                    </el-tooltip>
-                    <el-tooltip
+                    </TooltipWrapper>
+                    <TooltipWrapper
                         v-if="userDialog.mutualFriendCount"
-                        placement="top"
+                        side="top"
                         :content="t('dialog.user.tags.mutual_friends')">
                         <el-tag
                             type="info"
@@ -129,7 +129,7 @@
                             <i class="ri-group-line"></i>
                             {{ userDialog.mutualFriendCount }}
                         </el-tag>
-                    </el-tooltip>
+                    </TooltipWrapper>
                     <el-tag
                         v-if="userDialog.ref.$isTroll"
                         type="info"
@@ -158,7 +158,7 @@
                         {{ t('dialog.user.tags.vrchat_team') }}
                     </el-tag>
 
-                    <el-tooltip v-if="userDialog.ref.$platform === 'standalonewindows'" placement="top" content="PC">
+                    <TooltipWrapper v-if="userDialog.ref.$platform === 'standalonewindows'" side="top" content="PC">
                         <el-tag
                             type="info"
                             effect="plain"
@@ -167,8 +167,8 @@
                             style="margin-right: 5px; margin-top: 5px">
                             <i class="ri-computer-line"></i>
                         </el-tag>
-                    </el-tooltip>
-                    <el-tooltip v-else-if="userDialog.ref.$platform === 'android'" placement="top" content="Android">
+                    </TooltipWrapper>
+                    <TooltipWrapper v-else-if="userDialog.ref.$platform === 'android'" side="top" content="Android">
                         <el-tag
                             type="info"
                             effect="plain"
@@ -177,8 +177,8 @@
                             style="margin-right: 5px; margin-top: 5px">
                             <i class="ri-android-line"></i>
                         </el-tag>
-                    </el-tooltip>
-                    <el-tooltip v-else-if="userDialog.ref.$platform === 'ios'" placement="top" content="iOS">
+                    </TooltipWrapper>
+                    <TooltipWrapper v-else-if="userDialog.ref.$platform === 'ios'" side="top" content="iOS">
                         <el-tag
                             type="info"
                             effect="plain"
@@ -187,7 +187,7 @@
                             style="margin-right: 5px; margin-top: 5px"
                             ><i class="ri-apple-line"></i
                         ></el-tag>
-                    </el-tooltip>
+                    </TooltipWrapper>
                     <el-tag
                         v-else-if="userDialog.ref.$platform"
                         type="info"
@@ -212,7 +212,7 @@
                         >{{ userDialog.ref.$customTag }}</el-tag
                     >
                     <br />
-                    <el-tooltip v-for="badge in userDialog.ref.badges" :key="badge.badgeId" placement="top">
+                    <TooltipWrapper v-for="badge in userDialog.ref.badges" :key="badge.badgeId" side="top">
                         <template #content>
                             <span>{{ badge.badgeName }}</span>
                             <span v-if="badge.hidden">&nbsp;(Hidden)</span>
@@ -269,7 +269,7 @@
                                 </div>
                             </el-popover>
                         </div>
-                    </el-tooltip>
+                    </TooltipWrapper>
                 </div>
                 <div style="margin-top: 5px">
                     <span style="font-size: 12px" v-text="userDialog.ref.statusDescription"></span>
diff --git a/src/components/dialogs/WorldDialog/WorldDialog.vue b/src/components/dialogs/WorldDialog/WorldDialog.vue
index 31871a8a..ce986257 100644
--- a/src/components/dialogs/WorldDialog/WorldDialog.vue
+++ b/src/components/dialogs/WorldDialog/WorldDialog.vue
@@ -64,7 +64,7 @@
                                 style="margin-right: 5px; margin-top: 5px">
                                 {{ t('dialog.world.tags.private') }}
                             </el-tag>
-                            <el-tooltip v-if="worldDialog.isPC" placement="top" content="PC">
+                            <TooltipWrapper v-if="worldDialog.isPC" side="top" content="PC">
                                 <el-tag
                                     class="x-tag-platform-pc"
                                     type="info"
@@ -78,9 +78,9 @@
                                         {{ worldDialog.bundleSizes['standalonewindows'].fileSize }}
                                     </span>
                                 </el-tag>
-                            </el-tooltip>
+                            </TooltipWrapper>
 
-                            <el-tooltip v-if="worldDialog.isQuest" placement="top" content="Quest">
+                            <TooltipWrapper v-if="worldDialog.isQuest" side="top" content="Quest">
                                 <el-tag
                                     class="x-tag-platform-quest"
                                     type="info"
@@ -94,9 +94,9 @@
                                         {{ worldDialog.bundleSizes['android'].fileSize }}
                                     </span>
                                 </el-tag>
-                            </el-tooltip>
+                            </TooltipWrapper>
 
-                            <el-tooltip v-if="worldDialog.isIos" placement="top" content="iOS">
+                            <TooltipWrapper v-if="worldDialog.isIos" side="top" content="iOS">
                                 <el-tag
                                     class="x-tag-platform-ios"
                                     type="info"
@@ -110,7 +110,7 @@
                                         {{ worldDialog.bundleSizes['ios'].fileSize }}
                                     </span>
                                 </el-tag>
-                            </el-tooltip>
+                            </TooltipWrapper>
 
                             <el-tag
                                 v-if="worldDialog.avatarScalingDisabled"
@@ -185,9 +185,9 @@
                         </div>
                     </div>
                     <div style="flex: none; margin-left: 10px">
-                        <el-tooltip
+                        <TooltipWrapper
                             v-if="worldDialog.inCache"
-                            placement="top"
+                            side="top"
                             :content="t('dialog.world.actions.delete_cache_tooltip')">
                             <el-button
                                 :icon="Delete"
@@ -195,8 +195,8 @@
                                 circle
                                 :disabled="isGameRunning && worldDialog.cacheLocked"
                                 @click="deleteVRChatCache(worldDialog.ref)" />
-                        </el-tooltip>
-                        <el-tooltip placement="top" :content="t('dialog.world.actions.favorites_tooltip')">
+                        </TooltipWrapper>
+                        <TooltipWrapper side="top" :content="t('dialog.world.actions.favorites_tooltip')">
                             <el-button
                                 :type="worldDialog.isFavorite ? 'warning' : 'default'"
                                 :icon="worldDialog.isFavorite ? StarFilled : Star"
@@ -204,7 +204,7 @@
                                 circle
                                 style="margin-left: 5px"
                                 @click="worldDialogCommand('Add Favorite')" />
-                        </el-tooltip>
+                        </TooltipWrapper>
                         <el-dropdown trigger="click" style="margin-left: 5px" @command="worldDialogCommand">
                             <el-button type="default" :icon="MoreFilled" size="large" circle />
                             <template #dropdown>
@@ -345,8 +345,8 @@
                                         :location="room.$location.tag"
                                         :shortname="room.$location.shortName"
                                         style="margin-left: 5px" />
-                                    <el-tooltip
-                                        placement="top"
+                                    <TooltipWrapper
+                                        side="top"
                                         :content="t('dialog.world.instances.refresh_instance_info')">
                                         <el-button
                                             size="small"
@@ -354,10 +354,10 @@
                                             style="margin-left: 5px"
                                             circle
                                             @click="refreshInstancePlayerCount(room.tag)" />
-                                    </el-tooltip>
-                                    <el-tooltip
+                                    </TooltipWrapper>
+                                    <TooltipWrapper
                                         v-if="instanceJoinHistory.get(room.$location.tag)"
-                                        placement="top"
+                                        side="top"
                                         :content="t('dialog.previous_instances.info')">
                                         <el-button
                                             size="small"
@@ -366,7 +366,7 @@
                                             plain
                                             circle
                                             @click="showPreviousInstancesInfoDialog(room.location)" />
-                                    </el-tooltip>
+                                    </TooltipWrapper>
                                     <LastJoin :location="room.$location.tag" :currentlocation="lastLocation.location" />
                                     <InstanceInfo
                                         :location="room.tag"
@@ -454,7 +454,7 @@
                                     <span class="extra" style="display: inline">
                                         {{ worldDialog.id }}
                                     </span>
-                                    <el-tooltip placement="top" :content="t('dialog.world.info.id_tooltip')">
+                                    <TooltipWrapper side="top" :content="t('dialog.world.info.id_tooltip')">
                                         <el-dropdown trigger="click" size="small" style="margin-left: 5px" @click.stop>
                                             <el-button type="default" :icon="CopyDocument" size="small" circle />
                                             <template #dropdown>
@@ -471,7 +471,7 @@
                                                 </el-dropdown-menu>
                                             </template>
                                         </el-dropdown>
-                                    </el-tooltip>
+                                    </TooltipWrapper>
                                 </div>
                             </div>
                         </div>
@@ -597,7 +597,7 @@
                                 <span class="name" style="display: inline">
                                     {{ t('dialog.world.info.publication_date') }}
                                 </span>
-                                <el-tooltip v-if="isTimeInLabVisible" placement="top" style="margin-left: 5px">
+                                <TooltipWrapper v-if="isTimeInLabVisible" side="top" style="margin-left: 5px">
                                     <template #content>
                                         <span>
                                             {{ t('dialog.world.info.time_in_labs') }}
@@ -605,7 +605,7 @@
                                         </span>
                                     </template>
                                     <el-icon><ArrowDown /></el-icon>
-                                </el-tooltip>
+                                </TooltipWrapper>
                                 <span class="extra">
                                     {{ formatDateFilter(worldDialog.ref.publicationDate, 'long') }}
                                 </span>
@@ -652,35 +652,35 @@
                             <div class="detail">
                                 <span class="name">
                                     {{ t('dialog.world.info.last_visited') }}
-                                    <el-tooltip placement="top" :content="t('dialog.world.info.accuracy_notice')"
+                                    <TooltipWrapper side="top" :content="t('dialog.world.info.accuracy_notice')"
                                         ><el-icon style="margin-left: 3px"><Warning /></el-icon
-                                    ></el-tooltip>
+                                    ></TooltipWrapper>
                                 </span>
                                 <span class="extra">{{ formatDateFilter(worldDialog.lastVisit, 'long') }}</span>
                             </div>
                         </div>
-                        <el-tooltip placement="top" :content="t('dialog.user.info.open_previous_instance')">
+                        <TooltipWrapper side="top" :content="t('dialog.user.info.open_previous_instance')">
                             <div class="x-friend-item" @click="showPreviousInstancesWorldDialog(worldDialog.ref)">
                                 <div class="detail">
                                     <span class="name">
                                         {{ t('dialog.world.info.visit_count') }}
-                                        <el-tooltip placement="top" :content="t('dialog.world.info.accuracy_notice')"
+                                        <TooltipWrapper side="top" :content="t('dialog.world.info.accuracy_notice')"
                                             ><el-icon style="margin-left: 3px"><Warning /></el-icon
-                                        ></el-tooltip>
+                                        ></TooltipWrapper>
                                     </span>
                                     <span class="extra">
                                         {{ worldDialog.visitCount }}
                                     </span>
                                 </div>
                             </div>
-                        </el-tooltip>
+                        </TooltipWrapper>
                         <div class="x-friend-item" style="cursor: default">
                             <div class="detail">
                                 <span class="name"
                                     >{{ t('dialog.world.info.time_spent') }}
-                                    <el-tooltip placement="top" :content="t('dialog.world.info.accuracy_notice')">
+                                    <TooltipWrapper side="top" :content="t('dialog.world.info.accuracy_notice')">
                                         <el-icon style="margin-left: 3px"><Warning /></el-icon>
-                                    </el-tooltip>
+                                    </TooltipWrapper>
                                 </span>
                                 <span class="extra">
                                     {{ worldDialog.timeSpent === 0 ? ' - ' : timeSpent }}
diff --git a/src/components/ui/tooltip/TooltipWrapper.vue b/src/components/ui/tooltip/TooltipWrapper.vue
index c3437282..eaa17b4a 100644
--- a/src/components/ui/tooltip/TooltipWrapper.vue
+++ b/src/components/ui/tooltip/TooltipWrapper.vue
@@ -1,10 +1,14 @@
 <script setup>
-    import { computed, useSlots } from 'vue';
+    import { computed, useAttrs, useSlots } from 'vue';
 
     import Tooltip from './Tooltip.vue';
     import TooltipContent from './TooltipContent.vue';
     import TooltipTrigger from './TooltipTrigger.vue';
 
+    defineOptions({
+        inheritAttrs: false
+    });
+
     const props = defineProps({
         content: { type: [String, Number], required: false },
         side: { type: null, required: false },
@@ -17,13 +21,14 @@
         contentClass: { type: null, required: false }
     });
 
+    const attrs = useAttrs();
     const slots = useSlots();
     const hasContent = computed(() => Boolean(slots.content) || props.content !== undefined);
 </script>
 
 <template>
     <Tooltip :delay-duration="delayDuration" :disable-hoverable-content="disableHoverableContent" :disabled="disabled">
-        <TooltipTrigger :as-child="triggerAsChild">
+        <TooltipTrigger :as-child="triggerAsChild" v-bind="attrs">
             <slot />
         </TooltipTrigger>
         <TooltipContent v-if="hasContent" :side="side" :align="align" :side-offset="sideOffset" :class="contentClass">
diff --git a/src/plugin/components.js b/src/plugin/components.js
index 8cf28671..07d22cd8 100644
--- a/src/plugin/components.js
+++ b/src/plugin/components.js
@@ -9,6 +9,7 @@ import Launch from '../components/Launch.vue';
 import Location from '../components/Location.vue';
 import LocationWorld from '../components/LocationWorld.vue';
 import Timer from '../components/Timer.vue';
+import { TooltipWrapper } from '../components/ui/tooltip';
 
 export function initComponents(app) {
     app.component('Location', Location);
@@ -22,4 +23,5 @@ export function initComponents(app) {
     app.component('Launch', Launch);
     app.component('LocationWorld', LocationWorld);
     app.component('DataTable', DataTable);
+    app.component('TooltipWrapper', TooltipWrapper);
 }
diff --git a/src/views/Charts/components/InstanceActivity.vue b/src/views/Charts/components/InstanceActivity.vue
index 6a8e0d94..85a256be 100644
--- a/src/views/Charts/components/InstanceActivity.vue
+++ b/src/views/Charts/components/InstanceActivity.vue
@@ -21,9 +21,9 @@
             </div>
 
             <div>
-                <el-tooltip :content="t('view.charts.instance_activity.refresh')" placement="top"
+                <TooltipWrapper :content="t('view.charts.instance_activity.refresh')" side="top"
                     ><el-button :icon="Refresh" circle style="margin-right: 5px" @click="reloadData"></el-button
-                ></el-tooltip>
+                ></TooltipWrapper>
 
                 <el-popover placement="bottom" trigger="click" :width="250">
                     <div class="settings">
@@ -66,24 +66,24 @@
 
                     <template #reference>
                         <div>
-                            <el-tooltip :content="t('view.charts.instance_activity.settings.header')" placement="top">
+                            <TooltipWrapper :content="t('view.charts.instance_activity.settings.header')" side="top">
                                 <el-button :icon="Setting" style="margin-right: 5px" circle></el-button>
-                            </el-tooltip>
+                            </TooltipWrapper>
                         </div>
                     </template>
                 </el-popover>
                 <el-button-group style="margin-right: 5px">
-                    <el-tooltip :content="t('view.charts.instance_activity.previous_day')" placement="top">
+                    <TooltipWrapper :content="t('view.charts.instance_activity.previous_day')" side="top">
                         <el-button
                             :icon="ArrowLeft"
                             :disabled="isPrevDayBtnDisabled"
                             @click="changeSelectedDateFromBtn(false)"></el-button>
-                    </el-tooltip>
-                    <el-tooltip :content="t('view.charts.instance_activity.next_day')" placement="top">
+                    </TooltipWrapper>
+                    <TooltipWrapper :content="t('view.charts.instance_activity.next_day')" side="top">
                         <el-button :disabled="isNextDayBtnDisabled" @click="changeSelectedDateFromBtn(true)"
                             ><el-icon class="el-icon--right"><ArrowRight /></el-icon
                         ></el-button>
-                    </el-tooltip>
+                    </TooltipWrapper>
                 </el-button-group>
                 <el-date-picker
                     v-model="selectedDate"
diff --git a/src/views/Charts/components/MutualFriends.vue b/src/views/Charts/components/MutualFriends.vue
index c7710cc2..c97f1bb3 100644
--- a/src/views/Charts/components/MutualFriends.vue
+++ b/src/views/Charts/components/MutualFriends.vue
@@ -2,22 +2,22 @@
     <div class="mutual-graph pt-12" ref="mutualGraphRef">
         <div class="options-container mutual-graph__toolbar">
             <div class="mutual-graph__actions">
-                <el-tooltip :content="t('view.charts.mutual_friend.force_dialog.open_label')" placement="top">
+                <TooltipWrapper :content="t('view.charts.mutual_friend.force_dialog.open_label')" side="top">
                     <el-button circle :icon="Setting" :disabled="!graphReady" @click="openForceDialog"></el-button>
-                </el-tooltip>
-                <el-tooltip :content="fetchButtonLabel" placement="top">
+                </TooltipWrapper>
+                <TooltipWrapper :content="fetchButtonLabel" side="top">
                     <el-button type="primary" :disabled="fetchButtonDisabled" :loading="isFetching" @click="startFetch">
                         {{ fetchButtonLabel }}
                     </el-button>
-                </el-tooltip>
-                <el-tooltip
+                </TooltipWrapper>
+                <TooltipWrapper
                     v-if="isFetching"
                     :content="t('view.charts.mutual_friend.actions.stop_fetching')"
-                    placement="top">
+                    side="top">
                     <el-button type="danger" plain :disabled="status.cancelRequested" @click="cancelFetch">
                         {{ t('view.charts.mutual_friend.actions.stop') }}
                     </el-button>
-                </el-tooltip>
+                </TooltipWrapper>
             </div>
         </div>
 
diff --git a/src/views/Favorites/FavoritesAvatar.vue b/src/views/Favorites/FavoritesAvatar.vue
index fb9b7cb4..5ef9cf56 100644
--- a/src/views/Favorites/FavoritesAvatar.vue
+++ b/src/views/Favorites/FavoritesAvatar.vue
@@ -66,14 +66,14 @@
                     <div class="group-section">
                         <div class="group-section__header">
                             <span>{{ t('view.favorite.avatars.vrchat_favorites') }}</span>
-                            <el-tooltip placement="bottom" :content="t('view.favorite.refresh_favorites_tooltip')">
+                            <TooltipWrapper side="bottom" :content="t('view.favorite.refresh_favorites_tooltip')">
                                 <el-button
                                     :loading="isFavoriteLoading"
                                     size="small"
                                     :icon="Refresh"
                                     circle
                                     @click.stop="handleRefreshFavorites" />
-                            </el-tooltip>
+                            </TooltipWrapper>
                         </div>
                         <div class="group-section__list">
                             <template v-if="favoriteAvatarGroups.length">
@@ -259,7 +259,7 @@
                                 </div>
                             </template>
                             <div v-else class="group-empty">No Data</div>
-                            <el-tooltip
+                            <TooltipWrapper
                                 v-if="!isCreatingLocalGroup"
                                 :disabled="isLocalUserVrcPlusSupporter"
                                 :content="t('view.favorite.avatars.local_favorites')">
@@ -273,7 +273,7 @@
                                     <el-icon><Plus /></el-icon>
                                     <span>{{ t('view.favorite.avatars.new_group') }}</span>
                                 </div>
-                            </el-tooltip>
+                            </TooltipWrapper>
                             <el-input
                                 v-else
                                 ref="newLocalGroupInput"
diff --git a/src/views/Favorites/FavoritesFriend.vue b/src/views/Favorites/FavoritesFriend.vue
index 1d111c1a..83c04664 100644
--- a/src/views/Favorites/FavoritesFriend.vue
+++ b/src/views/Favorites/FavoritesFriend.vue
@@ -68,14 +68,14 @@
                     <div class="group-section">
                         <div class="group-section__header">
                             <span>{{ t('view.favorite.worlds.vrchat_favorites') }}</span>
-                            <el-tooltip placement="bottom" :content="t('view.favorite.refresh_favorites_tooltip')">
+                            <TooltipWrapper side="bottom" :content="t('view.favorite.refresh_favorites_tooltip')">
                                 <el-button
                                     :loading="isFavoriteLoading"
                                     size="small"
                                     :icon="Refresh"
                                     circle
                                     @click.stop="handleRefreshFavorites" />
-                            </el-tooltip>
+                            </TooltipWrapper>
                         </div>
                         <div class="group-section__list">
                             <template v-if="favoriteFriendGroups.length">
diff --git a/src/views/Favorites/FavoritesWorld.vue b/src/views/Favorites/FavoritesWorld.vue
index c8783716..a79fdfb0 100644
--- a/src/views/Favorites/FavoritesWorld.vue
+++ b/src/views/Favorites/FavoritesWorld.vue
@@ -68,14 +68,14 @@
                     <div class="group-section">
                         <div class="group-section__header">
                             <span>{{ t('view.favorite.worlds.vrchat_favorites') }}</span>
-                            <el-tooltip placement="bottom" :content="t('view.favorite.refresh_favorites_tooltip')">
+                            <TooltipWrapper side="bottom" :content="t('view.favorite.refresh_favorites_tooltip')">
                                 <el-button
                                     :loading="isFavoriteLoading"
                                     size="small"
                                     :icon="Refresh"
                                     circle
                                     @click.stop="handleRefreshFavorites" />
-                            </el-tooltip>
+                            </TooltipWrapper>
                         </div>
                         <div class="group-section__list">
                             <template v-if="favoriteWorldGroups.length">
diff --git a/src/views/Favorites/components/FavoritesAvatarItem.vue b/src/views/Favorites/components/FavoritesAvatarItem.vue
index a6b2b5b3..1c3702d2 100644
--- a/src/views/Favorites/components/FavoritesAvatarItem.vue
+++ b/src/views/Favorites/components/FavoritesAvatarItem.vue
@@ -9,18 +9,18 @@
                     <div class="favorites-search-card__title">
                         <span class="name">{{ localFavFakeRef.name }}</span>
                         <span class="favorites-search-card__badges">
-                            <el-tooltip
+                            <TooltipWrapper
                                 v-if="favorite.deleted"
-                                placement="top"
+                                side="top"
                                 :content="t('view.favorite.unavailable_tooltip')">
                                 <i class="ri-error-warning-line"></i>
-                            </el-tooltip>
-                            <el-tooltip
+                            </TooltipWrapper>
+                            <TooltipWrapper
                                 v-if="!isLocalFavorite && favorite.ref?.releaseStatus === 'private'"
-                                placement="top"
+                                side="top"
                                 :content="t('view.favorite.private')">
                                 <i class="ri-lock-line"></i>
-                            </el-tooltip>
+                            </TooltipWrapper>
                         </span>
                     </div>
                     <span class="extra">{{ localFavFakeRef.authorName }}</span>
@@ -45,8 +45,8 @@
                                 type="avatar" />
                         </div>
                         <div class="favorites-search-card__action">
-                            <el-tooltip
-                                placement="left"
+                            <TooltipWrapper
+                                side="left"
                                 :content="
                                     isLocalFavorite
                                         ? t('view.favorite.delete_tooltip')
@@ -60,14 +60,14 @@
                                     @click.stop="handlePrimaryDeleteAction">
                                     <i class="ri-delete-bin-line"></i>
                                 </el-button>
-                            </el-tooltip>
+                            </TooltipWrapper>
                         </div>
                     </div>
                 </template>
                 <template v-else>
                     <div class="favorites-search-card__action-group">
                         <div class="favorites-search-card__action" v-if="canSelectAvatar">
-                            <el-tooltip placement="top" :content="t('view.favorite.select_avatar_tooltip')">
+                            <TooltipWrapper side="top" :content="t('view.favorite.select_avatar_tooltip')">
                                 <el-button
                                     :disabled="currentUser.currentAvatar === favorite.id"
                                     size="small"
@@ -75,12 +75,12 @@
                                     circle
                                     class="favorites-search-card__action-btn"
                                     @click.stop="selectAvatarWithConfirmation(favorite.id)" />
-                            </el-tooltip>
+                            </TooltipWrapper>
                         </div>
                         <div class="favorites-search-card__action">
-                            <el-tooltip
+                            <TooltipWrapper
                                 v-if="showDangerUnfavorite"
-                                placement="bottom"
+                                side="bottom"
                                 :content="t('view.favorite.unfavorite_tooltip')">
                                 <el-button
                                     size="small"
@@ -89,8 +89,8 @@
                                     class="favorites-search-card__action-btn"
                                     type="danger"
                                     @click.stop="handlePrimaryDeleteAction" />
-                            </el-tooltip>
-                            <el-tooltip v-else placement="bottom" :content="t('view.favorite.edit_favorite_tooltip')">
+                            </TooltipWrapper>
+                            <TooltipWrapper v-else side="bottom" :content="t('view.favorite.edit_favorite_tooltip')">
                                 <el-button
                                     type="default"
                                     :icon="Star"
@@ -98,7 +98,7 @@
                                     circle
                                     class="favorites-search-card__action-btn"
                                     @click.stop="showFavoriteDialog('avatar', favorite.id)" />
-                            </el-tooltip>
+                            </TooltipWrapper>
                         </div>
                     </div>
                 </template>
diff --git a/src/views/Favorites/components/FavoritesAvatarLocalHistoryItem.vue b/src/views/Favorites/components/FavoritesAvatarLocalHistoryItem.vue
index 8f771360..a265aa84 100644
--- a/src/views/Favorites/components/FavoritesAvatarLocalHistoryItem.vue
+++ b/src/views/Favorites/components/FavoritesAvatarLocalHistoryItem.vue
@@ -14,7 +14,7 @@
         <div class="favorites-search-card__actions">
             <div class="favorites-search-card__action-group">
                 <div class="favorites-search-card__action">
-                    <el-tooltip placement="top" :content="t('view.favorite.select_avatar_tooltip')">
+                    <TooltipWrapper side="top" :content="t('view.favorite.select_avatar_tooltip')">
                         <el-button
                             :disabled="currentUser.currentAvatar === favorite.id"
                             size="small"
@@ -22,10 +22,10 @@
                             circle
                             class="favorites-search-card__action-btn"
                             @click.stop="selectAvatarWithConfirmation(favorite.id)" />
-                    </el-tooltip>
+                    </TooltipWrapper>
                 </div>
                 <div class="favorites-search-card__action">
-                    <el-tooltip placement="bottom" :content="t('view.favorite.favorite_tooltip')">
+                    <TooltipWrapper side="bottom" :content="t('view.favorite.favorite_tooltip')">
                         <el-button
                             type="default"
                             :icon="favoriteExists ? Star : StarFilled"
@@ -33,7 +33,7 @@
                             circle
                             class="favorites-search-card__action-btn"
                             @click.stop="showFavoriteDialog('avatar', favorite.id)" />
-                    </el-tooltip>
+                    </TooltipWrapper>
                 </div>
             </div>
         </div>
diff --git a/src/views/Favorites/components/FavoritesFriendItem.vue b/src/views/Favorites/components/FavoritesFriendItem.vue
index e2ea6d32..b4ebd9de 100644
--- a/src/views/Favorites/components/FavoritesFriendItem.vue
+++ b/src/views/Favorites/components/FavoritesFriendItem.vue
@@ -33,7 +33,7 @@
                                 type="friend" />
                         </div>
                         <div class="favorites-search-card__action">
-                            <el-tooltip placement="left" :content="t('view.favorite.unfavorite_tooltip')">
+                            <TooltipWrapper side="left" :content="t('view.favorite.unfavorite_tooltip')">
                                 <el-button
                                     size="small"
                                     circle
@@ -42,20 +42,20 @@
                                     @click.stop="handleDeleteFavorite">
                                     <i class="ri-delete-bin-line"></i>
                                 </el-button>
-                            </el-tooltip>
+                            </TooltipWrapper>
                         </div>
                     </div>
                 </template>
                 <template v-else>
                     <div class="favorites-search-card__action">
-                        <el-tooltip placement="right" :content="t('view.favorite.edit_favorite_tooltip')">
+                        <TooltipWrapper side="right" :content="t('view.favorite.edit_favorite_tooltip')">
                             <el-button
                                 size="small"
                                 :icon="Star"
                                 circle
                                 class="favorites-search-card__action-btn"
                                 @click.stop="showFavoriteDialog('friend', favorite.id)" />
-                        </el-tooltip>
+                        </TooltipWrapper>
                     </div>
                 </template>
             </div>
diff --git a/src/views/Favorites/components/FavoritesWorldItem.vue b/src/views/Favorites/components/FavoritesWorldItem.vue
index d2a6d781..ab08f7e5 100644
--- a/src/views/Favorites/components/FavoritesWorldItem.vue
+++ b/src/views/Favorites/components/FavoritesWorldItem.vue
@@ -64,19 +64,19 @@
                 <template v-else>
                     <div class="favorites-search-card__action-group">
                         <div class="favorites-search-card__action">
-                            <el-tooltip placement="top" :content="inviteOrLaunchText">
+                            <TooltipWrapper side="top" :content="inviteOrLaunchText">
                                 <el-button
                                     size="small"
                                     :icon="Message"
                                     class="favorites-search-card__action-btn"
                                     @click.stop="newInstanceSelfInvite(favorite.id)"
                                     circle />
-                            </el-tooltip>
+                            </TooltipWrapper>
                         </div>
                         <div class="favorites-search-card__action">
-                            <el-tooltip
+                            <TooltipWrapper
                                 v-if="showDangerUnfavorite"
-                                placement="top"
+                                side="top"
                                 :content="t('view.favorite.unfavorite_tooltip')">
                                 <el-button
                                     size="small"
@@ -85,8 +85,8 @@
                                     class="favorites-search-card__action-btn"
                                     type="danger"
                                     @click.stop="handleDeleteFavorite" />
-                            </el-tooltip>
-                            <el-tooltip v-else placement="top" :content="t('view.favorite.edit_favorite_tooltip')">
+                            </TooltipWrapper>
+                            <TooltipWrapper v-else side="top" :content="t('view.favorite.edit_favorite_tooltip')">
                                 <el-button
                                     type="default"
                                     :icon="Star"
@@ -94,7 +94,7 @@
                                     circle
                                     class="favorites-search-card__action-btn"
                                     @click.stop="showFavoriteDialog('world', favorite.id)" />
-                            </el-tooltip>
+                            </TooltipWrapper>
                         </div>
                     </div>
                 </template>
diff --git a/src/views/Favorites/components/FavoritesWorldLocalItem.vue b/src/views/Favorites/components/FavoritesWorldLocalItem.vue
index 8e993c86..26e3de32 100644
--- a/src/views/Favorites/components/FavoritesWorldLocalItem.vue
+++ b/src/views/Favorites/components/FavoritesWorldLocalItem.vue
@@ -46,19 +46,19 @@
                 <template v-else>
                     <div class="favorites-search-card__action-group">
                         <div class="favorites-search-card__action">
-                            <el-tooltip placement="top" :content="inviteOrLaunchText">
+                            <TooltipWrapper side="top" :content="inviteOrLaunchText">
                                 <el-button
                                     size="small"
                                     :icon="Message"
                                     class="favorites-search-card__action-btn"
                                     @click.stop="newInstanceSelfInvite(favorite.id)"
                                     circle />
-                            </el-tooltip>
+                            </TooltipWrapper>
                         </div>
                         <div class="favorites-search-card__action">
-                            <el-tooltip
+                            <TooltipWrapper
                                 v-if="showDangerUnfavorite"
-                                placement="top"
+                                side="top"
                                 :content="t('view.favorite.unfavorite_tooltip')">
                                 <el-button
                                     size="small"
@@ -67,8 +67,8 @@
                                     class="favorites-search-card__action-btn"
                                     type="danger"
                                     @click.stop="handleDeleteFavorite" />
-                            </el-tooltip>
-                            <el-tooltip v-else placement="top" :content="t('view.favorite.edit_favorite_tooltip')">
+                            </TooltipWrapper>
+                            <TooltipWrapper v-else side="top" :content="t('view.favorite.edit_favorite_tooltip')">
                                 <el-button
                                     type="default"
                                     :icon="Star"
@@ -76,7 +76,7 @@
                                     circle
                                     class="favorites-search-card__action-btn"
                                     @click.stop="showFavoriteDialog('world', favorite.id)" />
-                            </el-tooltip>
+                            </TooltipWrapper>
                         </div>
                     </div>
                 </template>
diff --git a/src/views/Feed/Feed.vue b/src/views/Feed/Feed.vue
index 3ac2ba21..1c46ce02 100644
--- a/src/views/Feed/Feed.vue
+++ b/src/views/Feed/Feed.vue
@@ -10,12 +10,12 @@
             <template #toolbar>
                 <div style="margin: 0 0 10px; display: flex; align-items: center">
                     <div style="flex: none; margin-right: 10px; display: flex; align-items: center">
-                        <el-tooltip placement="bottom" :content="t('view.feed.favorites_only_tooltip')">
+                        <TooltipWrapper side="bottom" :content="t('view.feed.favorites_only_tooltip')">
                             <el-switch
                                 v-model="feedTable.vip"
                                 active-color="var(--el-color-success)"
                                 @change="feedTableLookup"></el-switch>
-                        </el-tooltip>
+                        </TooltipWrapper>
                     </div>
                     <el-select
                         v-model="feedTable.filter"
diff --git a/src/views/FriendList/FriendList.vue b/src/views/FriendList/FriendList.vue
index eaa355b2..51094418 100644
--- a/src/views/FriendList/FriendList.vue
+++ b/src/views/FriendList/FriendList.vue
@@ -3,12 +3,12 @@
         <div>
             <div style="display: flex; align-items: center; justify-content: space-between">
                 <div style="flex: none; margin-right: 10px; display: flex; align-items: center">
-                    <el-tooltip placement="bottom" :content="t('view.friend_list.favorites_only_tooltip')">
+                    <TooltipWrapper side="bottom" :content="t('view.friend_list.favorites_only_tooltip')">
                         <el-switch
                             v-model="friendsListSearchFilterVIP"
                             active-color="var(--el-color-success)"
                             @change="friendsListSearchChange"></el-switch>
-                    </el-tooltip>
+                    </TooltipWrapper>
                     <el-select
                         v-model="friendsListSearchFilters"
                         multiple
@@ -128,7 +128,7 @@
                     sortable
                     :sort-method="(a, b) => sortLanguages(a, b)">
                     <template #default="{ row }">
-                        <el-tooltip v-for="item in row.$languages" :key="item.key" placement="top">
+                        <TooltipWrapper v-for="item in row.$languages" :key="item.key" side="top">
                             <template #content>
                                 <span>{{ item.value }} ({{ item.key }})</span>
                             </template>
@@ -136,13 +136,13 @@
                                 :class="languageClass(item.key)"
                                 style="display: inline-block; margin-right: 5px"
                                 class="flags"></span>
-                        </el-tooltip>
+                        </TooltipWrapper>
                     </template>
                 </el-table-column>
                 <el-table-column :label="t('table.friendList.bioLink')" width="130" prop="bioLinks">
                     <template #default="{ row }">
                         <div class="flex items-center">
-                            <el-tooltip v-for="(link, index) in row.bioLinks.filter(Boolean)" :key="index">
+                            <TooltipWrapper v-for="(link, index) in row.bioLinks.filter(Boolean)" :key="index">
                                 <template #content>
                                     <span v-text="link"></span>
                                 </template>
@@ -158,7 +158,7 @@
                                     "
                                     @click.stop="openExternalLink(link)"
                                     loading="lazy" />
-                            </el-tooltip>
+                            </TooltipWrapper>
                         </div>
                     </template>
                 </el-table-column>
diff --git a/src/views/FriendsLocations/FriendsLocations.vue b/src/views/FriendsLocations/FriendsLocations.vue
index d6b35caf..ac000001 100644
--- a/src/views/FriendsLocations/FriendsLocations.vue
+++ b/src/views/FriendsLocations/FriendsLocations.vue
@@ -12,11 +12,11 @@
                 <el-popover placement="bottom" trigger="click" :width="350">
                     <template #reference>
                         <div>
-                            <el-tooltip :content="t('view.charts.instance_activity.settings.header')" placement="top">
+                            <TooltipWrapper :content="t('view.charts.instance_activity.settings.header')" side="top">
                                 <el-button style="margin-right: 5px" circle
                                     ><i class="ri-settings-3-line"></i
                                 ></el-button>
-                            </el-tooltip>
+                            </TooltipWrapper>
                         </div>
                     </template>
                     <div style="display: flex; justify-content: space-between; align-items: center">
diff --git a/src/views/GameLog/GameLog.vue b/src/views/GameLog/GameLog.vue
index a8b5a803..c7d76256 100644
--- a/src/views/GameLog/GameLog.vue
+++ b/src/views/GameLog/GameLog.vue
@@ -10,12 +10,12 @@
             <template #toolbar>
                 <div style="margin: 0 0 10px; display: flex; align-items: center">
                     <div style="flex: none; margin-right: 10px; display: flex; align-items: center">
-                        <el-tooltip placement="bottom" :content="t('view.feed.favorites_only_tooltip')">
+                        <TooltipWrapper side="bottom" :content="t('view.feed.favorites_only_tooltip')">
                             <el-switch
                                 v-model="gameLogTable.vip"
                                 active-color="var(--el-color-success)"
                                 @change="gameLogTableLookup"></el-switch>
-                        </el-tooltip>
+                        </TooltipWrapper>
                     </div>
                     <el-select
                         v-model="gameLogTable.filter"
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index 4c389911..67f4dc59 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -1,9 +1,9 @@
 <template>
     <div style="float: left; margin: 5px; z-index: 3000">
-        <el-tooltip v-if="!noUpdater" placement="top" :content="t('view.login.updater')">
+        <TooltipWrapper v-if="!noUpdater" side="top" :content="t('view.login.updater')">
             <el-button type="default" size="small" :icon="Download" circle @click="showVRCXUpdateDialog"></el-button>
-        </el-tooltip>
-        <el-tooltip placement="top" :content="t('view.login.proxy_settings')">
+        </TooltipWrapper>
+        <TooltipWrapper side="top" :content="t('view.login.proxy_settings')">
             <el-button
                 type="default"
                 size="small"
@@ -11,7 +11,7 @@
                 style="margin-left: 5px"
                 circle
                 @click="promptProxySettings"></el-button>
-        </el-tooltip>
+        </TooltipWrapper>
     </div>
     <div v-loading="loginForm.loading" class="x-login-container">
         <div class="x-login">
diff --git a/src/views/Moderation/Moderation.vue b/src/views/Moderation/Moderation.vue
index 2a11f263..4c2948e4 100644
--- a/src/views/Moderation/Moderation.vue
+++ b/src/views/Moderation/Moderation.vue
@@ -18,14 +18,14 @@
                 v-model="playerModerationTable.filters[1].value"
                 :placeholder="t('view.moderation.search_placeholder')"
                 class="filter-input" />
-            <el-tooltip placement="bottom" :content="t('view.moderation.refresh_tooltip')">
+            <TooltipWrapper side="bottom" :content="t('view.moderation.refresh_tooltip')">
                 <el-button
                     type="default"
                     :loading="playerModerationTable.loading"
                     @click="refreshPlayerModerations()"
                     :icon="Refresh"
                     circle />
-            </el-tooltip>
+            </TooltipWrapper>
         </div>
 
         <DataTableLayout
diff --git a/src/views/Notifications/Notification.vue b/src/views/Notifications/Notification.vue
index ba05ca9c..f3ad3179 100644
--- a/src/views/Notifications/Notification.vue
+++ b/src/views/Notifications/Notification.vue
@@ -48,7 +48,7 @@
                         clearable
                         class="flex-[0.4]"
                         style="margin: 0 10px" />
-                    <el-tooltip placement="bottom" :content="t('view.notification.refresh_tooltip')">
+                    <TooltipWrapper side="bottom" :content="t('view.notification.refresh_tooltip')">
                         <el-button
                             type="default"
                             :loading="isNotificationsLoading"
@@ -56,7 +56,7 @@
                             circle
                             style="flex: none"
                             @click="refreshNotifications()" />
-                    </el-tooltip>
+                    </TooltipWrapper>
                 </div>
             </template>
         </DataTableLayout>
diff --git a/src/views/PlayerList/PlayerList.vue b/src/views/PlayerList/PlayerList.vue
index 370d91be..56f55df7 100644
--- a/src/views/PlayerList/PlayerList.vue
+++ b/src/views/PlayerList/PlayerList.vue
@@ -64,7 +64,7 @@
                             style="margin-right: 5px"
                             >{{ t('dialog.world.tags.private') }}</el-tag
                         >
-                        <el-tooltip v-if="currentInstanceWorld.isPC" placement="top" content="PC">
+                        <TooltipWrapper v-if="currentInstanceWorld.isPC" side="top" content="PC">
                             <el-tag
                                 class="x-tag-platform-pc"
                                 type="info"
@@ -78,8 +78,8 @@
                                     >{{ currentInstanceWorld.bundleSizes['standalonewindows'].fileSize }}</span
                                 >
                             </el-tag>
-                        </el-tooltip>
-                        <el-tooltip v-if="currentInstanceWorld.isQuest" placement="top" content="Android">
+                        </TooltipWrapper>
+                        <TooltipWrapper v-if="currentInstanceWorld.isQuest" side="top" content="Android">
                             <el-tag
                                 class="x-tag-platform-quest"
                                 type="info"
@@ -93,8 +93,8 @@
                                     >{{ currentInstanceWorld.bundleSizes['android'].fileSize }}</span
                                 >
                             </el-tag>
-                        </el-tooltip>
-                        <el-tooltip v-if="currentInstanceWorld.isIos" placement="top" content="iOS">
+                        </TooltipWrapper>
+                        <TooltipWrapper v-if="currentInstanceWorld.isIos" side="top" content="iOS">
                             <el-tag
                                 class="x-tag-platform-ios"
                                 type="info"
@@ -108,7 +108,7 @@
                                     >{{ currentInstanceWorld.bundleSizes['ios'].fileSize }}</span
                                 >
                             </el-tag>
-                        </el-tooltip>
+                        </TooltipWrapper>
                         <el-tag
                             v-if="currentInstanceWorld.avatarScalingDisabled"
                             type="warning"
@@ -244,24 +244,24 @@
                         sortable>
                         <template #default="scope">
                             <template v-if="chatboxUserBlacklist.has(scope.row.ref.id)">
-                                <el-tooltip placement="left" content="Unblock chatbox messages">
+                                <TooltipWrapper side="left" content="Unblock chatbox messages">
                                     <el-button
                                         text
                                         :icon="Mute"
                                         size="small"
                                         style="color: red; margin-right: 5px"
                                         @click.stop="deleteChatboxUserBlacklist(scope.row.ref.id)"></el-button>
-                                </el-tooltip>
+                                </TooltipWrapper>
                             </template>
                             <template v-else>
-                                <el-tooltip placement="left" content="Block chatbox messages">
+                                <TooltipWrapper side="left" content="Block chatbox messages">
                                     <el-button
                                         text
                                         :icon="Microphone"
                                         size="small"
                                         style="margin-right: 5px"
                                         @click.stop="addChatboxUserBlacklist(scope.row.ref)"></el-button>
-                                </el-tooltip>
+                                </TooltipWrapper>
                             </template>
                             <span v-text="scope.row.photonId"></span>
                         </template>
@@ -275,37 +275,37 @@
                         :sort-method="sortInstanceIcon">
                         <template #default="scope">
                             <span></span>
-                            <el-tooltip v-if="scope.row.isMaster" placement="left" content="Instance Master">
+                            <TooltipWrapper v-if="scope.row.isMaster" side="left" content="Instance Master">
                                 <span>👑</span>
-                            </el-tooltip>
-                            <el-tooltip v-if="scope.row.isModerator" placement="left" content="Moderator">
+                            </TooltipWrapper>
+                            <TooltipWrapper v-if="scope.row.isModerator" side="left" content="Moderator">
                                 <span>⚔️</span>
-                            </el-tooltip>
-                            <el-tooltip v-if="scope.row.isFriend" placement="left" content="Friend">
+                            </TooltipWrapper>
+                            <TooltipWrapper v-if="scope.row.isFriend" side="left" content="Friend">
                                 <span>💚</span>
-                            </el-tooltip>
-                            <el-tooltip v-if="scope.row.isBlocked" placement="left" content="Blocked">
+                            </TooltipWrapper>
+                            <TooltipWrapper v-if="scope.row.isBlocked" side="left" content="Blocked">
                                 <el-icon style="color: red"><CircleClose /></el-icon>
-                            </el-tooltip>
-                            <el-tooltip v-if="scope.row.isMuted" placement="left" content="Muted">
+                            </TooltipWrapper>
+                            <TooltipWrapper v-if="scope.row.isMuted" side="left" content="Muted">
                                 <el-icon style="color: var(--el-color-warning)"><Mute /></el-icon>
-                            </el-tooltip>
-                            <el-tooltip
+                            </TooltipWrapper>
+                            <TooltipWrapper
                                 v-if="scope.row.isAvatarInteractionDisabled"
-                                placement="left"
+                                side="left"
                                 content="Avatar Interaction Disabled
                                     ">
                                 <el-icon style="color: var(--el-color-warning)"><Pointer /></el-icon>
-                            </el-tooltip>
-                            <el-tooltip v-if="scope.row.isChatBoxMuted" placement="left" content="Chatbox Muted">
+                            </TooltipWrapper>
+                            <TooltipWrapper v-if="scope.row.isChatBoxMuted" side="left" content="Chatbox Muted">
                                 <el-icon style="color: var(--el-color-warning)"><ChatLineRound /></el-icon>
-                            </el-tooltip>
-                            <el-tooltip v-if="scope.row.timeoutTime" placement="left" content="Timeout">
+                            </TooltipWrapper>
+                            <TooltipWrapper v-if="scope.row.timeoutTime" side="left" content="Timeout">
                                 <span style="color: var(--el-color-danger)">🔴{{ scope.row.timeoutTime }}s</span>
-                            </el-tooltip>
-                            <el-tooltip v-if="scope.row.ageVerified" placement="left" content="18+ Verified">
+                            </TooltipWrapper>
+                            <TooltipWrapper v-if="scope.row.ageVerified" side="left" content="18+ Verified">
                                 <i class="ri-id-card-line"></i>
-                            </el-tooltip>
+                            </TooltipWrapper>
                         </template>
                     </el-table-column>
                     <el-table-column :label="t('table.playerList.platform')" prop="inVRMode" width="90">
@@ -341,7 +341,7 @@
                     </el-table-column>
                     <el-table-column :label="t('table.playerList.language')" width="100" prop="ref.$languages">
                         <template #default="scope">
-                            <el-tooltip v-for="item in scope.row.ref.$languages" :key="item.key" placement="top">
+                            <TooltipWrapper v-for="item in scope.row.ref.$languages" :key="item.key" side="top">
                                 <template #content>
                                     <span>{{ item.value }} ({{ item.key }})</span>
                                 </template>
@@ -349,13 +349,13 @@
                                     class="flags"
                                     :class="languageClass(item.key)"
                                     style="display: inline-block; margin-right: 5px"></span>
-                            </el-tooltip>
+                            </TooltipWrapper>
                         </template>
                     </el-table-column>
                     <el-table-column :label="t('table.playerList.bioLink')" width="100" prop="ref.bioLinks">
                         <template #default="scope">
                             <div style="display: flex; align-items: center">
-                                <el-tooltip
+                                <TooltipWrapper
                                     v-for="(link, index) in scope.row.ref.bioLinks?.filter(Boolean)"
                                     :key="index">
                                     <template #content>
@@ -372,7 +372,7 @@
                                         "
                                         @click.stop="openExternalLink(link)"
                                         loading="lazy" />
-                                </el-tooltip>
+                                </TooltipWrapper>
                             </div>
                         </template>
                     </el-table-column>
diff --git a/src/views/PlayerList/components/PhotonEventTable.vue b/src/views/PlayerList/components/PhotonEventTable.vue
index 2e9c930b..8aae90dc 100644
--- a/src/views/PlayerList/components/PhotonEventTable.vue
+++ b/src/views/PlayerList/components/PhotonEventTable.vue
@@ -24,25 +24,25 @@
             <el-button @click="emitShowChatboxBlacklist">{{
                 t('view.player_list.photon.chatbox_blacklist')
             }}</el-button>
-            <el-tooltip placement="bottom" :content="t('view.player_list.photon.status_tooltip')">
+            <TooltipWrapper side="bottom" :content="t('view.player_list.photon.status_tooltip')">
                 <div style="display: inline-flex; align-items: center; font-size: 14px">
                     <span v-if="ipcEnabled && !photonEventIcon">🟢</span>
                     <span v-else-if="ipcEnabled">⚪</span>
                     <span v-else>🔴</span>
                 </div>
-            </el-tooltip>
+            </TooltipWrapper>
         </div>
         <el-tabs type="card">
             <el-tab-pane :label="t('view.player_list.photon.current')">
                 <DataTable v-bind="photonEventTable" style="margin-bottom: 10px">
                     <el-table-column :label="t('table.playerList.date')" prop="created_at" width="130">
                         <template #default="scope">
-                            <el-tooltip placement="right">
+                            <TooltipWrapper side="right">
                                 <template #content>
                                     <span>{{ formatDateFilter(scope.row.created_at, 'long') }}</span>
                                 </template>
                                 <span>{{ formatDateFilter(scope.row.created_at, 'short') }}</span>
-                            </el-tooltip>
+                            </TooltipWrapper>
                         </template>
                     </el-table-column>
                     <el-table-column :label="t('table.playerList.user')" prop="photonId" width="160">
@@ -77,7 +77,7 @@
                             </template>
                             <template v-else-if="scope.row.type === 'ChangeStatus'">
                                 <template v-if="scope.row.status !== scope.row.previousStatus">
-                                    <el-tooltip placement="top">
+                                    <TooltipWrapper side="top">
                                         <template #content>
                                             <span v-if="scope.row.previousStatus === 'active'">{{
                                                 t('dialog.user.status.active')
@@ -94,11 +94,11 @@
                                             <span v-else>{{ t('dialog.user.status.offline') }}</span>
                                         </template>
                                         <i class="x-user-status" :class="statusClass(scope.row.previousStatus)"></i>
-                                    </el-tooltip>
+                                    </TooltipWrapper>
                                     <span>
                                         <el-icon><ArrowRight /></el-icon>
                                     </span>
-                                    <el-tooltip placement="top">
+                                    <TooltipWrapper side="top">
                                         <template #content>
                                             <span v-if="scope.row.status === 'active'">{{
                                                 t('dialog.user.status.active')
@@ -118,7 +118,7 @@
                                             class="x-user-status"
                                             :class="statusClass(scope.row.status)"
                                             style="margin-right: 5px"></i>
-                                    </el-tooltip>
+                                    </TooltipWrapper>
                                 </template>
                                 <span
                                     v-if="scope.row.statusDescription !== scope.row.previousStatusDescription"
@@ -193,7 +193,7 @@
                             </span>
                             <span v-else-if="scope.row.type === 'SpawnEmoji'">
                                 <span v-if="scope.row.imageUrl">
-                                    <el-tooltip placement="right">
+                                    <TooltipWrapper side="right">
                                         <template #content>
                                             <img
                                                 :src="scope.row.imageUrl"
@@ -203,7 +203,7 @@
                                                 loading="lazy" />
                                         </template>
                                         <span v-text="scope.row.fileId"></span>
-                                    </el-tooltip>
+                                    </TooltipWrapper>
                                 </span>
                                 <span v-else v-text="scope.row.text"></span>
                             </span>
@@ -220,12 +220,12 @@
                 <DataTable v-bind="photonEventTablePrevious" style="margin-bottom: 10px">
                     <el-table-column :label="t('table.playerList.date')" prop="created_at" width="130">
                         <template #default="scope">
-                            <el-tooltip placement="right">
+                            <TooltipWrapper side="right">
                                 <template #content>
                                     <span>{{ formatDateFilter(scope.row.created_at, 'long') }}</span>
                                 </template>
                                 <span>{{ formatDateFilter(scope.row.created_at, 'short') }}</span>
-                            </el-tooltip>
+                            </TooltipWrapper>
                         </template>
                     </el-table-column>
                     <el-table-column :label="t('table.playerList.user')" prop="photonId" width="160">
@@ -267,7 +267,7 @@
                             </template>
                             <template v-else-if="scope.row.type === 'ChangeStatus'">
                                 <template v-if="scope.row.status !== scope.row.previousStatus">
-                                    <el-tooltip placement="top">
+                                    <TooltipWrapper side="top">
                                         <template #content>
                                             <span v-if="scope.row.previousStatus === 'active'">{{
                                                 t('dialog.user.status.active')
@@ -284,11 +284,11 @@
                                             <span v-else>{{ t('dialog.user.status.offline') }}</span>
                                         </template>
                                         <i class="x-user-status" :class="statusClass(scope.row.previousStatus)"></i>
-                                    </el-tooltip>
+                                    </TooltipWrapper>
                                     <span>
                                         <el-icon><ArrowRight /></el-icon>
                                     </span>
-                                    <el-tooltip placement="top">
+                                    <TooltipWrapper side="top">
                                         <template #content>
                                             <span v-if="scope.row.status === 'active'">{{
                                                 t('dialog.user.status.active')
@@ -308,7 +308,7 @@
                                             class="x-user-status"
                                             :class="statusClass(scope.row.status)"
                                             style="margin-right: 5px"></i>
-                                    </el-tooltip>
+                                    </TooltipWrapper>
                                 </template>
                                 <span
                                     v-if="scope.row.statusDescription !== scope.row.previousStatusDescription"
@@ -356,7 +356,7 @@
                             <span v-else-if="scope.row.type === 'ChatBoxMessage'" v-text="scope.row.text"></span>
                             <span v-else-if="scope.row.type === 'SpawnEmoji'">
                                 <span v-if="scope.row.imageUrl">
-                                    <el-tooltip placement="right">
+                                    <TooltipWrapper side="right">
                                         <template #content>
                                             <img
                                                 :src="scope.row.imageUrl"
@@ -366,7 +366,7 @@
                                                 loading="lazy" />
                                         </template>
                                         <span v-text="scope.row.fileId"></span>
-                                    </el-tooltip>
+                                    </TooltipWrapper>
                                 </span>
                                 <span v-else v-text="scope.row.text"></span>
                             </span>
diff --git a/src/views/Search/Search.vue b/src/views/Search/Search.vue
index c39581fe..9047f89d 100644
--- a/src/views/Search/Search.vue
+++ b/src/views/Search/Search.vue
@@ -7,14 +7,14 @@
                 style="flex: 1"
                 @input="updateSearchText"
                 @keyup.enter="search"></el-input>
-            <el-tooltip placement="bottom" :content="t('view.search.clear_results_tooltip')">
+            <TooltipWrapper side="bottom" :content="t('view.search.clear_results_tooltip')">
                 <el-button
                     type="default"
                     :icon="Delete"
                     circle
                     style="flex: none; margin-left: 10px"
                     @click="handleClearSearch"></el-button>
-            </el-tooltip>
+            </TooltipWrapper>
         </div>
         <el-tabs ref="searchTabRef" style="margin-top: 15px" @tab-click="searchText = ''">
             <el-tab-pane v-loading="isSearchUserLoading" :label="t('view.search.user.header')" style="min-height: 60px">
@@ -155,7 +155,7 @@
                                 </el-dropdown-menu>
                             </template>
                         </el-dropdown>
-                        <el-tooltip placement="bottom" :content="t('view.search.avatar.refresh_tooltip')">
+                        <TooltipWrapper side="bottom" :content="t('view.search.avatar.refresh_tooltip')">
                             <el-button
                                 type="default"
                                 :loading="userDialog.isAvatarsLoading"
@@ -163,7 +163,7 @@
                                 :icon="Refresh"
                                 circle
                                 @click="refreshUserDialogAvatars"></el-button>
-                        </el-tooltip>
+                        </TooltipWrapper>
                         <span style="font-size: 14px; margin-left: 5px; margin-right: 5px">{{
                             t('view.search.avatar.result_count', {
                                 count: searchAvatarResults.length
diff --git a/src/views/Settings/components/SimpleSwitch.vue b/src/views/Settings/components/SimpleSwitch.vue
index fda221a2..5480162d 100644
--- a/src/views/Settings/components/SimpleSwitch.vue
+++ b/src/views/Settings/components/SimpleSwitch.vue
@@ -2,9 +2,9 @@
     <div class="simple-switch">
         <div class="name" :style="{ width: longLabel ? '300px' : undefined }">
             {{ label }}
-            <el-tooltip v-if="tooltip" placement="top" :content="tooltip"
+            <TooltipWrapper v-if="tooltip" side="top" :content="tooltip"
                 ><el-icon size="small" class="tooltip"><InfoFilled /></el-icon
-            ></el-tooltip>
+            ></TooltipWrapper>
         </div>
 
         <el-switch class="switch" :model-value="value" @change="change" :disabled="disabled"></el-switch>
diff --git a/src/views/Settings/components/Tabs/AdvancedTab.vue b/src/views/Settings/components/Tabs/AdvancedTab.vue
index 5563cfc8..94c02869 100644
--- a/src/views/Settings/components/Tabs/AdvancedTab.vue
+++ b/src/views/Settings/components/Tabs/AdvancedTab.vue
@@ -338,7 +338,7 @@
         <div class="options-container">
             <div class="header-bar">
                 <span class="header">{{ t('view.profile.config_json') }}</span>
-                <el-tooltip placement="top" :content="t('view.profile.refresh_tooltip')">
+                <TooltipWrapper side="top" :content="t('view.profile.refresh_tooltip')">
                     <el-button
                         type="default"
                         size="small"
@@ -346,8 +346,8 @@
                         circle
                         style="margin-left: 5px"
                         @click="refreshConfigTreeData()"></el-button>
-                </el-tooltip>
-                <el-tooltip placement="top" :content="t('view.profile.clear_results_tooltip')">
+                </TooltipWrapper>
+                <TooltipWrapper side="top" :content="t('view.profile.clear_results_tooltip')">
                     <el-button
                         type="default"
                         size="small"
@@ -355,7 +355,7 @@
                         circle
                         style="margin-left: 5px"
                         @click="configTreeData = []"></el-button>
-                </el-tooltip>
+                </TooltipWrapper>
             </div>
             <el-tree v-if="configTreeData.length > 0" :data="configTreeData" style="margin-top: 10px; font-size: 12px">
                 <template #default="scope">
diff --git a/src/views/Settings/components/Tabs/GeneralTab.vue b/src/views/Settings/components/Tabs/GeneralTab.vue
index 5ebcb25e..e95e4335 100644
--- a/src/views/Settings/components/Tabs/GeneralTab.vue
+++ b/src/views/Settings/components/Tabs/GeneralTab.vue
@@ -234,12 +234,12 @@
             <div class="options-container-item">
                 <span class="name"
                     >{{ t('view.settings.general.automation.auto_invite_request_accept') }}
-                    <el-tooltip
-                        placement="top"
+                    <TooltipWrapper
+                        side="top"
                         style="margin-left: 5px"
                         :content="t('view.settings.general.automation.auto_invite_request_accept_tooltip')">
                         <el-icon><InfoFilled /></el-icon>
-                    </el-tooltip>
+                    </TooltipWrapper>
                 </span>
                 <br />
                 <el-radio-group
diff --git a/src/views/Settings/components/Tabs/PicturesTab.vue b/src/views/Settings/components/Tabs/PicturesTab.vue
index a02b5872..9462b6e9 100644
--- a/src/views/Settings/components/Tabs/PicturesTab.vue
+++ b/src/views/Settings/components/Tabs/PicturesTab.vue
@@ -61,11 +61,11 @@
         <span class="sub-header" style="margin-right: 5px">{{
             t('view.settings.advanced.advanced.save_instance_prints_to_file.header')
         }}</span>
-        <el-tooltip
-            placement="top"
+        <TooltipWrapper
+            side="top"
             :content="t('view.settings.advanced.advanced.save_instance_prints_to_file.header_tooltip')">
             <el-icon><InfoFilled /></el-icon>
-        </el-tooltip>
+        </TooltipWrapper>
         <simple-switch
             :label="t('view.settings.advanced.advanced.save_instance_prints_to_file.description')"
             :value="saveInstancePrints"
@@ -87,11 +87,11 @@
         <span class="sub-header" style="margin-right: 5px"
             >{{ t('view.settings.advanced.advanced.save_instance_emoji_to_file.header') }}
         </span>
-        <el-tooltip
-            placement="top"
+        <TooltipWrapper
+            side="top"
             :content="t('view.settings.advanced.advanced.save_instance_prints_to_file.header_tooltip')">
             <el-icon><InfoFilled /></el-icon>
-        </el-tooltip>
+        </TooltipWrapper>
         <simple-switch
             :label="t('view.settings.advanced.advanced.save_instance_emoji_to_file.description')"
             :value="saveInstanceEmoji"
diff --git a/src/views/Settings/dialogs/FeedFiltersDialog.vue b/src/views/Settings/dialogs/FeedFiltersDialog.vue
index 974a99de..30793bfd 100644
--- a/src/views/Settings/dialogs/FeedFiltersDialog.vue
+++ b/src/views/Settings/dialogs/FeedFiltersDialog.vue
@@ -9,14 +9,14 @@
             <div v-for="setting in currentOptions" :key="setting.key" class="toggle-item">
                 <span class="toggle-name"
                     >{{ setting.name
-                    }}<el-tooltip
+                    }}<TooltipWrapper
                         v-if="setting.tooltip"
-                        placement="top"
+                        side="top"
                         style="margin-left: 5px"
                         :content="setting.tooltip">
                         <el-icon v-if="setting.tooltipWarning"><Warning /></el-icon>
                         <el-icon v-else><InfoFilled /></el-icon>
-                    </el-tooltip>
+                    </TooltipWrapper>
                 </span>
 
                 <el-radio-group
diff --git a/src/views/Settings/dialogs/RegistryBackupDialog.vue b/src/views/Settings/dialogs/RegistryBackupDialog.vue
index 4896cacd..a630da77 100644
--- a/src/views/Settings/dialogs/RegistryBackupDialog.vue
+++ b/src/views/Settings/dialogs/RegistryBackupDialog.vue
@@ -31,30 +31,30 @@
                 </el-table-column>
                 <el-table-column :label="t('dialog.registry_backup.action')" width="90" align="right">
                     <template #default="scope">
-                        <el-tooltip placement="top" :content="t('dialog.registry_backup.restore')">
+                        <TooltipWrapper side="top" :content="t('dialog.registry_backup.restore')">
                             <el-button
                                 text
                                 :icon="Upload"
                                 size="small"
                                 class="button-pd-0"
                                 @click="restoreVrcRegistryBackup(scope.row)"></el-button>
-                        </el-tooltip>
-                        <el-tooltip placement="top" :content="t('dialog.registry_backup.save_to_file')">
+                        </TooltipWrapper>
+                        <TooltipWrapper side="top" :content="t('dialog.registry_backup.save_to_file')">
                             <el-button
                                 text
                                 :icon="Download"
                                 size="small"
                                 class="button-pd-0"
                                 @click="saveVrcRegistryBackupToFile(scope.row)"></el-button>
-                        </el-tooltip>
-                        <el-tooltip placement="top" :content="t('dialog.registry_backup.delete')">
+                        </TooltipWrapper>
+                        <TooltipWrapper side="top" :content="t('dialog.registry_backup.delete')">
                             <el-button
                                 text
                                 :icon="Delete"
                                 size="small"
                                 class="button-pd-0"
                                 @click="deleteVrcRegistryBackup(scope.row)"></el-button>
-                        </el-tooltip>
+                        </TooltipWrapper>
                     </template>
                 </el-table-column>
             </DataTable>
diff --git a/src/views/Settings/dialogs/VRChatConfigDialog.vue b/src/views/Settings/dialogs/VRChatConfigDialog.vue
index 0089fa6f..43a9b7dc 100644
--- a/src/views/Settings/dialogs/VRChatConfigDialog.vue
+++ b/src/views/Settings/dialogs/VRChatConfigDialog.vue
@@ -16,7 +16,7 @@
             <span>/</span>
             <span v-text="totalCacheSize"></span>
             <span>GB</span>
-            <el-tooltip placement="top" :content="t('dialog.config_json.refresh')">
+            <TooltipWrapper side="top" :content="t('dialog.config_json.refresh')">
                 <el-button
                     type="default"
                     :loading="VRChatCacheSizeLoading"
@@ -25,7 +25,7 @@
                     circle
                     style="margin-left: 5px"
                     @click="getVRChatCacheSize"></el-button>
-            </el-tooltip>
+            </TooltipWrapper>
 
             <div style="margin-top: 10px">
                 <span style="margin-right: 5px">{{ t('dialog.config_json.delete_all_cache') }}</span>
diff --git a/src/views/Sidebar/Sidebar.vue b/src/views/Sidebar/Sidebar.vue
index b8769118..18f3a8fb 100644
--- a/src/views/Sidebar/Sidebar.vue
+++ b/src/views/Sidebar/Sidebar.vue
@@ -41,7 +41,7 @@
                 </el-option>
             </el-select>
             <div>
-                <el-tooltip placement="bottom" :content="t('side_panel.refresh_tooltip')">
+                <TooltipWrapper side="bottom" :content="t('side_panel.refresh_tooltip')">
                     <el-button
                         type="default"
                         :loading="isRefreshFriendsLoading"
@@ -50,7 +50,7 @@
                         circle
                         style="margin-right: 10px"
                         @click="refreshFriendsList"></el-button>
-                </el-tooltip>
+                </TooltipWrapper>
             </div>
         </div>
         <el-tabs class="zero-margin-tabs" stretch style="height: calc(100% - 70px); margin-top: 5px">