VRCX/src/components/ui/tooltip/TooltipContent.vue

<script setup>
    import { TooltipArrow, TooltipContent, TooltipPortal, useForwardPropsEmits } from 'reka-ui';
    import { cn } from '@/lib/utils';
    import { reactiveOmit } from '@vueuse/core';

    defineOptions({
        inheritAttrs: false
    });

    const props = defineProps({
        forceMount: { type: Boolean, required: false },
        ariaLabel: { type: String, required: false },
        asChild: { type: Boolean, required: false },
        as: { type: null, required: false },
        side: { type: null, required: false },
        sideOffset: { type: Number, required: false, default: 4 },
        align: { type: null, required: false },
        alignOffset: { type: Number, required: false },
        avoidCollisions: { type: Boolean, required: false },
        collisionBoundary: { type: null, required: false },
        collisionPadding: { type: [Number, Object], required: false },
        arrowPadding: { type: Number, required: false },
        sticky: { type: String, required: false },
        hideWhenDetached: { type: Boolean, required: false },
        positionStrategy: { type: String, required: false },
        updatePositionStrategy: { type: String, required: false },
        class: { type: null, required: false }
    });

    const emits = defineEmits(['escapeKeyDown', 'pointerDownOutside']);

    const delegatedProps = reactiveOmit(props, 'class');
    const forwarded = useForwardPropsEmits(delegatedProps, emits);
</script>

<template>
    <TooltipPortal>
        <TooltipContent
            data-slot="tooltip-content"
            v-bind="{ ...forwarded, ...$attrs }"
            :class="
                cn(
                    'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-12000 w-fit rounded-md px-3 py-1.5 text-xs text-balance',
                    props.class
                )
            ">
            <slot />

            <TooltipArrow
                class="bg-foreground fill-foreground z-12000 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]" />
        </TooltipContent>
    </TooltipPortal>
</template>