SuperAPI AI 工具集

el-tooltip

智能体与模型

查看项目

更新于 10-15 23:32

技能介绍

用途:Element Plus 的 Tooltip 组件用于在鼠标悬停等交互下显示提示、说明或补充信息,适合表单说明、按钮释义、图标提示等场景。

主要能力:支持 top、bottom、left、right 及 start/end 对齐共 9 种定位,dark 与 light 两种主题;内容可为字符串、HTML 字符串(raw-content)或通过 content 插槽渲染 Vue 组件(VNode);支持虚拟触发(virtual-triggering 配合 virtual-ref)、受控显隐(v-model:visible)、自定义过渡动画、自定义 popper 类名与样式、延迟显示/隐藏、自动关闭、箭头控制等。触发方式支持 hover、click、focus、contextmenu 或数组。

使用方式:以默认插槽包裹单个根触发元素,通过 content 属性或 content 插槽提供内容。例如:<el-tooltip content="Top center" placement="top"><el-button>Top</el-button></el-tooltip>。受控模式使用 v-model:visible;虚拟触发使用 virtual-triggering 与 :virtual-ref。组件暴露 popperRef、contentRef、updatePopper、onOpen、onClose、hide 等方法,事件包括 before-show、show、before-hide、hide。

限制与注意:默认插槽只接受单个根元素;禁用元素需外包一层容器才能显示提示;提示内使用 router-link 时建议改用 $router.push;嵌套输入框中空格键失效可将 trigger-keys 设为空数组;出于安全考虑优先使用 VNode 而非 HTML 内容;内容应保持简短。具体安装与引入方式资料未提供。