TooltipWrapper

src/App.vue

@@ -1,26 +1,29 @@
 <template>
-    <el-config-provider
-        :locale="/** @type {import('element-plus/es/locale').Language} */ (messages[locale].elementPlus)">
-        <MacOSTitleBar></MacOSTitleBar>
+    <TooltipProvider>
+        <el-config-provider
+            :locale="/** @type {import('element-plus/es/locale').Language} */ (messages[locale].elementPlus)">
+            <MacOSTitleBar></MacOSTitleBar>
 
-        <div
-            id="x-app"
-            class="x-app"
-            :class="{ 'with-macos-titlebar': isMacOS }"
-            ondragenter="event.preventDefault()"
-            ondragover="event.preventDefault()"
-            ondrop="event.preventDefault()">
-            <RouterView></RouterView>
+            <div
+                id="x-app"
+                class="x-app"
+                :class="{ 'with-macos-titlebar': isMacOS }"
+                ondragenter="event.preventDefault()"
+                ondragover="event.preventDefault()"
+                ondrop="event.preventDefault()">
+                <RouterView></RouterView>
 
-            <VRCXUpdateDialog></VRCXUpdateDialog>
-        </div>
-    </el-config-provider>
+                <VRCXUpdateDialog></VRCXUpdateDialog>
+            </div>
+        </el-config-provider>
+    </TooltipProvider>
 </template>
 
 <script setup>
     import { computed, onBeforeMount, onMounted } from 'vue';
     import { useI18n } from 'vue-i18n';
 
+    import { TooltipProvider } from './components/ui/tooltip';
     import { createGlobalStores } from './stores';
     import { initNoty } from './plugin/noty';
 

src/components/ui/tooltip/TooltipWrapper.vue

@@ -0,0 +1,35 @@
+<script setup>
+    import { computed, useSlots } from 'vue';
+
+    import Tooltip from './Tooltip.vue';
+    import TooltipContent from './TooltipContent.vue';
+    import TooltipTrigger from './TooltipTrigger.vue';
+
+    const props = defineProps({
+        content: { type: [String, Number], required: false },
+        side: { type: null, required: false },
+        align: { type: null, required: false },
+        sideOffset: { type: Number, required: false },
+        delayDuration: { type: Number, required: false },
+        disableHoverableContent: { type: Boolean, required: false },
+        disabled: { type: Boolean, required: false },
+        triggerAsChild: { type: Boolean, required: false, default: true },
+        contentClass: { type: null, required: false }
+    });
+
+    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">
+            <slot />
+        </TooltipTrigger>
+        <TooltipContent v-if="hasContent" :side="side" :align="align" :side-offset="sideOffset" :class="contentClass">
+            <slot name="content">
+                <span v-if="content !== undefined">{{ content }}</span>
+            </slot>
+        </TooltipContent>
+    </Tooltip>
+</template>

src/components/ui/tooltip/index.js

@@ -1,4 +1,5 @@
 export { default as Tooltip } from './Tooltip.vue';
 export { default as TooltipContent } from './TooltipContent.vue';
 export { default as TooltipProvider } from './TooltipProvider.vue';
+export { default as TooltipWrapper } from './TooltipWrapper.vue';
 export { default as TooltipTrigger } from './TooltipTrigger.vue';