开箱即用-鼠标经过显示提示框-带缩放动画-vue3

使用v-if css 控制

<template>
    <div class="fixed right-4 top-1/2 -translate-y-1/2 z-50">
        <div class="phone-tooltip-container">
            <!-- 电话图标 -->
            <div class="phone-icon" @mouseenter="isHovered = true" @mouseleave="isHovered = false">
                <img :src="icon" class="icon-img" />
            </div>

            <!-- 提示框（悬停时显示） -->
            <div class="tooltip-box" :class="{ 'active': isHovered }">
                <!-- 三角形指示器 -->
                <div class="tooltip-arrow"></div>
                <!-- 电话信息 -->
                <div class="tooltip-content">
                    <p>123456789 张三</p>
                    <p>123456789 李四</p>
                </d