add NativeTooltip component

src/components/Location.vue

@@ -12,9 +12,9 @@
             </span>
             <span v-if="groupName" :class="{ 'x-link': link }" @click="handleShowGroupDialog">({{ groupName }})</span>
             <span v-if="region" :class="['flags', 'inline-block', 'ml-5', region]"></span>
-            <el-tooltip v-if="isClosed" :content="t('dialog.user.info.instance_closed')">
+            <NativeTooltip 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>
+            </NativeTooltip>
             <el-icon v-if="strict" :class="['inline-block', 'ml-5']"><Lock /></el-icon>
         </span>
     </div>

src/components/LocationWorld.vue

@@ -6,9 +6,9 @@
         </span>
         <span v-if="groupName" @click="showGroupDialog" class="x-link">({{ groupName }})</span>
         <span v-if="region" :class="['flags', 'inline-block', 'ml-5', region]"></span>
-        <el-tooltip v-if="isClosed" :content="t('dialog.user.info.instance_closed')">
+        <NativeTooltip 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>
+        </NativeTooltip>
         <el-icon v-if="strict" style="display: inline-block; margin-left: 5px"><Lock /></el-icon>
     </span>
 </template>

src/components/NativeTooltip.vue

@@ -0,0 +1,527 @@
+<template>
+    <span
+        ref="triggerEl"
+        class="vrcx-native-tooltip__trigger"
+        :style="triggerStyle"
+        @mouseenter="onEnter"
+        @mouseleave="onLeave"
+        @focusin="onEnter"
+        @focusout="onLeave"
+        @keydown.esc="close">
+        <slot />
+    </span>
+
+    <div
+        ref="tooltipEl"
+        class="vrcx-native-tooltip__content"
+        :class="[
+            placementClass,
+            {
+                'has-arrow': props.showArrow,
+                'is-open': isOpen,
+                'is-closing': isClosing
+            }
+        ]"
+        :style="contentStyle"
+        popover="manual"
+        role="tooltip"
+        @mouseenter="cancelClose"
+        @mouseleave="onLeave">
+        <slot name="content">
+            <span class="vrcx-native-tooltip__text" v-text="content" />
+        </slot>
+    </div>
+</template>
+
+<script setup>
+    import { computed, onBeforeUnmount, ref } from 'vue';
+
+    const props = defineProps({
+        content: {
+            type: String,
+            default: ''
+        },
+        showAfter: {
+            type: Number,
+            default: 0
+        },
+        placement: {
+            type: String,
+            default: 'top'
+        },
+        enterMs: {
+            type: Number,
+            default: 120
+        },
+        exitMs: {
+            type: Number,
+            default: 100
+        },
+        offset: {
+            type: Number,
+            default: 8
+        },
+        maxWidth: {
+            type: String,
+            default: '260px'
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        showArrow: {
+            type: Boolean,
+            default: true
+        }
+    });
+
+    const ARROW_SIZE_PX = 10;
+
+    const triggerEl = ref(null);
+    const tooltipEl = ref(null);
+
+    const isOpen = ref(false);
+    const isClosing = ref(false);
+
+    const anchorName = `--vrcx-tt-${Math.random().toString(36).slice(2, 10)}`;
+
+    const triggerStyle = computed(() => {
+        return {
+            'anchor-name': anchorName
+        };
+    });
+
+    const contentStyle = computed(() => {
+        const effectiveOffsetPx = props.offset + (props.showArrow ? ARROW_SIZE_PX / 2 : 0);
+        return {
+            'position-anchor': anchorName,
+            '--vrcx-tt-enter': `${props.enterMs}ms`,
+            '--vrcx-tt-exit': `${props.exitMs}ms`,
+            '--vrcx-tt-offset': `${effectiveOffsetPx}px`,
+            '--vrcx-tt-max-width': props.maxWidth,
+            '--vrcx-tt-shift-x': `${shiftX.value}px`,
+            '--vrcx-tt-shift-y': `${shiftY.value}px`,
+            '--vrcx-tt-arrow-x': `${arrowX.value}px`,
+            '--vrcx-tt-arrow-y': `${arrowY.value}px`
+        };
+    });
+
+    const placementClass = computed(() => {
+        const normalized = String(props.placement || 'top').toLowerCase();
+        return `is-${normalized}`;
+    });
+
+    const shiftX = ref(0);
+    const shiftY = ref(0);
+    const arrowX = ref(0);
+    const arrowY = ref(0);
+
+    const timers = {
+        open: 0,
+        close: 0,
+        hide: 0
+    };
+
+    function clearTimer(key) {
+        const id = timers[key];
+        if (id) {
+            window.clearTimeout(id);
+            timers[key] = 0;
+        }
+    }
+
+    function clearAllTimers() {
+        clearTimer('open');
+        clearTimer('close');
+        clearTimer('hide');
+    }
+
+    function resetOffsets() {
+        shiftX.value = 0;
+        shiftY.value = 0;
+        arrowX.value = 0;
+        arrowY.value = 0;
+    }
+
+    function isPopoverOpen(el) {
+        return Boolean(el?.matches?.(':popover-open'));
+    }
+
+    function updateViewportShift() {
+        const el = tooltipEl.value;
+        if (!el) {
+            return;
+        }
+
+        shiftX.value = 0;
+        shiftY.value = 0;
+
+        const rect = el.getBoundingClientRect();
+        const margin = 8;
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+
+        let dx = 0;
+        let dy = 0;
+
+        if (rect.left < margin) {
+            dx += margin - rect.left;
+        }
+        if (rect.right > vw - margin) {
+            dx -= rect.right - (vw - margin);
+        }
+        if (rect.top < margin) {
+            dy += margin - rect.top;
+        }
+        if (rect.bottom > vh - margin) {
+            dy -= rect.bottom - (vh - margin);
+        }
+
+        shiftX.value = Math.round(dx);
+        shiftY.value = Math.round(dy);
+    }
+
+    function updateArrowPosition() {
+        if (!props.showArrow) {
+            return;
+        }
+
+        const trigger = triggerEl.value;
+        const tooltip = tooltipEl.value;
+        if (!trigger || !tooltip) {
+            return;
+        }
+
+        const placement = String(props.placement || 'top').toLowerCase();
+
+        const tr = trigger.getBoundingClientRect();
+        const tt = tooltip.getBoundingClientRect();
+
+        const cs = window.getComputedStyle(tooltip);
+        const padLeft = Number.parseFloat(cs.paddingLeft) || 0;
+        const padRight = Number.parseFloat(cs.paddingRight) || 0;
+        const padTop = Number.parseFloat(cs.paddingTop) || 0;
+        const padBottom = Number.parseFloat(cs.paddingBottom) || 0;
+
+        const padding = 12;
+        const half = ARROW_SIZE_PX / 2;
+
+        if (placement.startsWith('top') || placement.startsWith('bottom')) {
+            const desired = tr.left + tr.width / 2 - tt.left;
+
+            const edgeLeft = Math.max(padding, padLeft) + half;
+            const edgeRight = Math.max(padding, padRight) + half;
+            const min = edgeLeft;
+            const max = tt.width - edgeRight;
+
+            const clamped = min > max ? tt.width / 2 : Math.min(Math.max(desired, min), max);
+            arrowX.value = Math.round(clamped);
+            arrowY.value = 0;
+            return;
+        }
+
+        if (placement.startsWith('left') || placement.startsWith('right')) {
+            const desired = tr.top + tr.height / 2 - tt.top;
+
+            const edgeTop = Math.max(padding, padTop) + half;
+            const edgeBottom = Math.max(padding, padBottom) + half;
+            const min = edgeTop;
+            const max = tt.height - edgeBottom;
+
+            const clamped = min > max ? tt.height / 2 : Math.min(Math.max(desired, min), max);
+            arrowY.value = Math.round(clamped);
+            arrowX.value = 0;
+        }
+    }
+
+    function open() {
+        if (props.disabled) {
+            return;
+        }
+
+        const el = tooltipEl.value;
+        if (!el) {
+            return;
+        }
+
+        clearAllTimers();
+
+        const doOpen = () => {
+            timers.open = 0;
+
+            const tooltip = tooltipEl.value;
+            if (!tooltip) {
+                return;
+            }
+
+            const alreadyOpen = isPopoverOpen(tooltip);
+
+            isClosing.value = false;
+            if (!alreadyOpen) {
+                isOpen.value = false;
+                tooltip.showPopover();
+            }
+
+            window.requestAnimationFrame(() => {
+                updateViewportShift();
+                window.requestAnimationFrame(() => {
+                    updateArrowPosition();
+                    isOpen.value = true;
+                });
+            });
+        };
+
+        if (props.showAfter > 0) {
+            timers.open = window.setTimeout(doOpen, props.showAfter);
+            return;
+        }
+
+        doOpen();
+    }
+
+    function close(immediate = false) {
+        const el = tooltipEl.value;
+        if (!el) {
+            return;
+        }
+
+        clearAllTimers();
+
+        if (immediate) {
+            isOpen.value = false;
+            isClosing.value = false;
+            resetOffsets();
+            if (isPopoverOpen(el)) {
+                el.hidePopover();
+            }
+            return;
+        }
+
+        isOpen.value = false;
+        isClosing.value = true;
+        timers.hide = window.setTimeout(() => {
+            timers.hide = 0;
+            isClosing.value = false;
+            resetOffsets();
+            if (isPopoverOpen(el)) {
+                el.hidePopover();
+            }
+        }, props.exitMs);
+    }
+
+    function onEnter() {
+        open();
+    }
+
+    function onLeave() {
+        clearTimer('open');
+        clearTimer('close');
+        timers.close = window.setTimeout(() => {
+            timers.close = 0;
+            close();
+        }, 80);
+    }
+
+    onBeforeUnmount(() => {
+        clearAllTimers();
+    });
+</script>
+
+<style scoped>
+    .vrcx-native-tooltip__trigger {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .vrcx-native-tooltip__content {
+        position: fixed;
+        inset: auto;
+
+        overflow: visible;
+        clip-path: none;
+
+        inline-size: max-content;
+        max-inline-size: min(var(--vrcx-tt-max-width), calc(100vw - 16px));
+        min-inline-size: 0;
+        padding: 6px 10px;
+
+        border-radius: var(--el-border-radius-base);
+        border: 0;
+
+        background: var(--el-tooltip-bg-color, color-mix(in srgb, var(--el-color-black) 88%, transparent));
+        color: var(--el-tooltip-text-color, var(--el-color-white));
+
+        box-shadow: none;
+
+        font-size: 12px;
+        line-height: 1.35;
+
+        white-space: pre-line;
+        word-break: break-word;
+        overflow-wrap: anywhere;
+
+        opacity: 0;
+
+        transition-property: opacity;
+        transition-duration: var(--vrcx-tt-exit);
+        transition-timing-function: linear;
+        transition-behavior: allow-discrete;
+
+        pointer-events: auto;
+    }
+
+    :global(html.dark) .vrcx-native-tooltip__content {
+        background: var(--el-tooltip-bg-color, color-mix(in srgb, var(--el-color-black) 96%, transparent));
+    }
+
+    .vrcx-native-tooltip__content.has-arrow::before {
+        content: '';
+        position: absolute;
+        width: 10px;
+        height: 10px;
+        background: var(--el-tooltip-bg-color, color-mix(in srgb, var(--el-color-black) 88%, transparent));
+        transform: rotate(45deg);
+    }
+
+    :global(html.dark) .vrcx-native-tooltip__content.has-arrow::before {
+        background: var(--el-tooltip-bg-color, color-mix(in srgb, var(--el-color-black) 96%, transparent));
+    }
+
+    .vrcx-native-tooltip__content.has-arrow.is-top::before,
+    .vrcx-native-tooltip__content.has-arrow.is-top-start::before,
+    .vrcx-native-tooltip__content.has-arrow.is-top-end::before {
+        left: var(--vrcx-tt-arrow-x, 50%);
+        bottom: -5px;
+        translate: -50% 0;
+    }
+
+    .vrcx-native-tooltip__content.has-arrow.is-bottom::before,
+    .vrcx-native-tooltip__content.has-arrow.is-bottom-start::before,
+    .vrcx-native-tooltip__content.has-arrow.is-bottom-end::before {
+        left: var(--vrcx-tt-arrow-x, 50%);
+        top: -5px;
+        translate: -50% 0;
+    }
+
+    .vrcx-native-tooltip__content.has-arrow.is-left::before,
+    .vrcx-native-tooltip__content.has-arrow.is-left-start::before,
+    .vrcx-native-tooltip__content.has-arrow.is-left-end::before {
+        top: var(--vrcx-tt-arrow-y, 50%);
+        right: -5px;
+        translate: 0 -50%;
+    }
+
+    .vrcx-native-tooltip__content.has-arrow.is-right::before,
+    .vrcx-native-tooltip__content.has-arrow.is-right-start::before,
+    .vrcx-native-tooltip__content.has-arrow.is-right-end::before {
+        top: var(--vrcx-tt-arrow-y, 50%);
+        left: -5px;
+        translate: 0 -50%;
+    }
+
+    .vrcx-native-tooltip__content:popover-open.is-open {
+        opacity: 1;
+        transition-duration: var(--vrcx-tt-enter);
+    }
+
+    .vrcx-native-tooltip__content:popover-open.is-closing {
+        opacity: 0;
+        transition-duration: var(--vrcx-tt-exit);
+    }
+
+    .vrcx-native-tooltip__content.is-top {
+        left: anchor(center);
+        bottom: anchor(top);
+        translate: calc(-50% + var(--vrcx-tt-shift-x)) calc((-1 * var(--vrcx-tt-offset)) + var(--vrcx-tt-shift-y));
+        transform-origin: bottom center;
+    }
+
+    .vrcx-native-tooltip__content.is-top-start {
+        left: anchor(left);
+        bottom: anchor(top);
+        translate: var(--vrcx-tt-shift-x) calc((-1 * var(--vrcx-tt-offset)) + var(--vrcx-tt-shift-y));
+        transform-origin: bottom left;
+    }
+
+    .vrcx-native-tooltip__content.is-top-end {
+        right: anchor(right);
+        bottom: anchor(top);
+        translate: var(--vrcx-tt-shift-x) calc((-1 * var(--vrcx-tt-offset)) + var(--vrcx-tt-shift-y));
+        transform-origin: bottom right;
+    }
+
+    .vrcx-native-tooltip__content.is-bottom {
+        left: anchor(center);
+        top: anchor(bottom);
+        translate: calc(-50% + var(--vrcx-tt-shift-x)) calc(var(--vrcx-tt-offset) + var(--vrcx-tt-shift-y));
+        transform-origin: top center;
+    }
+
+    .vrcx-native-tooltip__content.is-bottom-start {
+        left: anchor(left);
+        top: anchor(bottom);
+        translate: var(--vrcx-tt-shift-x) calc(var(--vrcx-tt-offset) + var(--vrcx-tt-shift-y));
+        transform-origin: top left;
+    }
+
+    .vrcx-native-tooltip__content.is-bottom-end {
+        right: anchor(right);
+        top: anchor(bottom);
+        translate: var(--vrcx-tt-shift-x) calc(var(--vrcx-tt-offset) + var(--vrcx-tt-shift-y));
+        transform-origin: top right;
+    }
+
+    .vrcx-native-tooltip__content.is-left {
+        right: anchor(left);
+        top: anchor(center);
+        translate: calc((-1 * var(--vrcx-tt-offset)) + var(--vrcx-tt-shift-x)) calc(-50% + var(--vrcx-tt-shift-y));
+        transform-origin: center right;
+    }
+
+    .vrcx-native-tooltip__content.is-left-start {
+        right: anchor(left);
+        top: anchor(top);
+        translate: calc((-1 * var(--vrcx-tt-offset)) + var(--vrcx-tt-shift-x)) var(--vrcx-tt-shift-y);
+        transform-origin: top right;
+    }
+
+    .vrcx-native-tooltip__content.is-left-end {
+        right: anchor(left);
+        bottom: anchor(bottom);
+        translate: calc((-1 * var(--vrcx-tt-offset)) + var(--vrcx-tt-shift-x)) var(--vrcx-tt-shift-y);
+        transform-origin: bottom right;
+    }
+
+    .vrcx-native-tooltip__content.is-right {
+        left: anchor(right);
+        top: anchor(center);
+        translate: calc(var(--vrcx-tt-offset) + var(--vrcx-tt-shift-x)) calc(-50% + var(--vrcx-tt-shift-y));
+        transform-origin: center left;
+    }
+
+    .vrcx-native-tooltip__content.is-right-start {
+        left: anchor(right);
+        top: anchor(top);
+        translate: calc(var(--vrcx-tt-offset) + var(--vrcx-tt-shift-x)) var(--vrcx-tt-shift-y);
+        transform-origin: top left;
+    }
+
+    .vrcx-native-tooltip__content.is-right-end {
+        left: anchor(right);
+        bottom: anchor(bottom);
+        translate: calc(var(--vrcx-tt-offset) + var(--vrcx-tt-shift-x)) var(--vrcx-tt-shift-y);
+        transform-origin: bottom left;
+    }
+
+    .vrcx-native-tooltip__content:not([class*='is-']) {
+        left: anchor(center);
+        bottom: anchor(top);
+        translate: calc(-50% + var(--vrcx-tt-shift-x)) calc((-1 * var(--vrcx-tt-offset)) + var(--vrcx-tt-shift-y));
+    }
+
+    .vrcx-native-tooltip__text {
+        display: block;
+        white-space: pre-line;
+    }
+</style>

src/components/NavMenu.vue

@@ -69,19 +69,20 @@
                     </el-popover>
                 </el-menu>
                 <el-divider style="width: calc(100% - 18px); margin-left: 9px"></el-divider>
-                <el-tooltip :content="t('prompt.direct_access_omni.header')" placement="right"
-                    ><div class="bottom-button" @click="directAccessPaste"><i class="ri-compass-3-line"></i></div
-                ></el-tooltip>
+                <NativeTooltip :content="t('prompt.direct_access_omni.header')" placement="right">
+                    <div class="bottom-button" @click="directAccessPaste"><i class="ri-compass-3-line"></i></div>
+                </NativeTooltip>
             </div>
 
             <div class="nav-menu-container-bottom">
-                <el-tooltip v-if="branch === 'Nightly'" :show-after="150" :content="'Feedback'" placement="right"
-                    ><div
+                <NativeTooltip v-if="branch === 'Nightly'" :show-after="150" :content="'Feedback'" placement="right">
+                    <div
                         class="bottom-button"
                         id="feedback"
                         @click="!sentryErrorReporting && setSentryErrorReporting()">
-                        <i class="ri-feedback-line"></i></div
-                ></el-tooltip>
+                        <i class="ri-feedback-line"></i>
+                    </div>
+                </NativeTooltip>
 
                 <el-popover
                     v-model:visible="supportMenuVisible"
@@ -118,11 +119,11 @@
                     </div>
                     <template #reference>
                         <div>
-                            <el-tooltip :show-after="150" :content="t('nav_tooltip.help_support')" placement="right">
+                            <NativeTooltip :show-after="150" :content="t('nav_tooltip.help_support')" placement="right">
                                 <div class="bottom-button">
                                     <i class="ri-question-line"></i>
                                 </div>
-                            </el-tooltip>
+                            </NativeTooltip>
                         </div>
                     </template>
                 </el-popover>

src/plugin/components.js

@@ -8,10 +8,12 @@ import LastJoin from '../components/LastJoin.vue';
 import Launch from '../components/Launch.vue';
 import Location from '../components/Location.vue';
 import LocationWorld from '../components/LocationWorld.vue';
+import NativeTooltip from '../components/NativeTooltip.vue';
 import Timer from '../components/Timer.vue';
 
 export function initComponents(app) {
     app.component('Location', Location);
+    app.component('NativeTooltip', NativeTooltip);
     app.component('Timer', Timer);
     app.component('InstanceInfo', InstanceInfo);
     app.component('LastJoin', LastJoin);

src/views/Feed/Feed.vue

@@ -2,9 +2,13 @@
     <div class="x-container feed">
         <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')">
+                <NativeTooltip
+                    placement="bottom"
+                    :content="t('view.feed.favorites_only_tooltip')"
+                    :enter-ms="140"
+                    :exit-ms="120">
                     <el-switch v-model="feedTable.vip" active-color="#13ce66" @change="feedTableLookup"></el-switch>
-                </el-tooltip>
+                </NativeTooltip>
             </div>
             <el-select
                 v-model="feedTable.filter"
@@ -130,12 +134,12 @@
 
             <el-table-column :label="t('table.feed.date')" prop="created_at" :sortable="true" width="130">
                 <template #default="scope">
-                    <el-tooltip placement="right">
+                    <NativeTooltip placement="right">
                         <template #content>
                             <span>{{ formatDateFilter(scope.row.created_at, 'long') }}</span>
                         </template>
                         <span>{{ formatDateFilter(scope.row.created_at, 'short') }}</span>
-                    </el-tooltip>
+                    </NativeTooltip>
                 </template>
             </el-table-column>
 

src/views/GameLog/GameLog.vue

@@ -2,12 +2,12 @@
     <div class="x-container">
         <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')">
+                <NativeTooltip placement="bottom" :content="t('view.feed.favorites_only_tooltip')">
                     <el-switch
                         v-model="gameLogTable.vip"
                         active-color="#13ce66"
                         @change="gameLogTableLookup"></el-switch>
-                </el-tooltip>
+                </NativeTooltip>
             </div>
             <el-select
                 v-model="gameLogTable.filter"
@@ -43,12 +43,12 @@
         <DataTable v-loading="gameLogTable.loading" v-bind="gameLogTable">
             <el-table-column :label="t('table.gameLog.date')" prop="created_at" :sortable="true" width="130">
                 <template #default="scope">
-                    <el-tooltip placement="right">
+                    <NativeTooltip placement="right">
                         <template #content>
                             <span>{{ formatDateFilter(scope.row.created_at, 'long') }}</span>
                         </template>
                         <span>{{ formatDateFilter(scope.row.created_at, 'short') }}</span>
-                    </el-tooltip>
+                    </NativeTooltip>
                 </template>
             </el-table-column>
 
@@ -166,7 +166,7 @@
                             class="small-button"
                             @click="deleteGameLogEntryPrompt(scope.row)"></el-button>
                     </template>
-                    <el-tooltip placement="top" :content="t('dialog.previous_instances.info')">
+                    <NativeTooltip placement="top" :content="t('dialog.previous_instances.info')">
                         <el-button
                             v-if="scope.row.type === 'Location'"
                             text
@@ -174,7 +174,7 @@
                             size="small"
                             class="small-button"
                             @click="showPreviousInstancesInfoDialog(scope.row.location)"></el-button>
-                    </el-tooltip>
+                    </NativeTooltip>
                 </template>
             </el-table-column>
         </DataTable>

src/views/Sidebar/Sidebar.vue

@@ -41,7 +41,7 @@
                 </el-option>
             </el-select>
             <div>
-                <el-tooltip placement="bottom" :content="t('side_panel.refresh_tooltip')">
+                <NativeTooltip placement="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>
+                </NativeTooltip>
             </div>
         </div>
         <el-tabs class="zero-margin-tabs" stretch style="height: calc(100% - 60px); margin-top: 5px">