给流程表单字段添加鼠标悬停提示
title: 给流程表单字段添加鼠标悬停提示 created: 2026-04-19 updated: 2026-04-19 type: reference tags: [imported, pptx] source: "Weaver Doc Import"
Slide 1
实现给流程表单字段添加鼠标悬停提示 泛微网络 培训服务中心
Slide 2
需求背景及实现效果
Slide 3
在标准功能中，我们可以给单行文本字段旁边放置“？”说明，增加提示语，但是这个提示需要用户手动点击问号才会弹出提示，在某种程度上，提示的不明显，用户容易错过提示，没有起到提示的作用。本期视频通过JS代码块可以实现将鼠标移入到字段，立即悬浮除黑底提示，鼠标移开或者点击任意处，提示瞬间消失。
Slide 4
鼠标移入“申请人”字段上，立即悬浮提示“填写实际申请人”； 鼠标移入“请假类型”字段上，立即悬浮提示“填写请假类型” ； 实现效果
Slide 5
实现思路
Slide 6
1、定义提示信息映射 (tipMap) 实现思路 2、悬浮提示框的创建与样式设置 showTip(fid,e)：根据传入的字段ID (fid) 和鼠标事件对象 (e)，从 tipMap 中取出提示文本，设置提示框的位置（鼠标右下方15像素处）并淡入显示。 hideTip(): 隐藏提示框。 用于关联表单字段的ID和对应的提示文本。 创建了一个绝对定位的div元素作为提示框。 定义了其外观：深色背景、白色文字、圆角、阴影等，并设置了pointer-events: none;使其不干扰鼠标操作。 3、核心函数：showTip与hideTip
Slide 7
实现思路 4、事件绑定与处理 通过事件委托，为页面上特定的控件绑定了 mouseenter, mousemove, mouseleave 事件来控制提示框的显示、移动和隐藏。 mouseenter: 当鼠标进入浏览按钮、下拉选择框、日期选择器时，查找邻近的隐藏域字段ID，并调用 showTip。 mousemove: 鼠标移动时，实时更新提示框位置，使其跟随鼠标。 mouseleave: 鼠标离开控件时，隐藏提示框（有一个判断排除误触日历组件）。 额外在 document 上绑定 mousedown 事件，点击页面任意处即可隐藏提示框。
Slide 8
JS代码块应用样例
Slide 9
配置实现步骤 实现方式： 后台打开html模板； 打开插入代码块； 插入修改好的代码块； 流程表单 ，点击页面任意处即可隐藏提示框。
Slide 8
JS代码块应用样例
Slide 9
配置实现步骤
实现方式：
后台打开html模板；
打开插入代码块；
插入修改好的代码块；
流程表单### Slide 10
代码示例——JS代码
(function () {
// 定义字段ID与对应提示信息的映射关系
const tipMap = {
field24297: '填写实际申请人', // 示例：实际申请人字段的提示
field24303: '填写请假类型' // 示例：请假类型字段的提示
// 可根据实际需要继续添加其他字段，格式为: '字段ID': '提示文字'
};
// 创建全局悬浮提示框DOM元素并设置基本样式
const $tip = $(<div id="ewHoverTip"
style="position:fixed;display:none;background:#333;color:#fff;font-size:12px;
line-height:1.4;padding:6px 10px;border-radius:4px;white-space:nowrap;
z-index:10000;box-shadow:0 2px 8px rgba(0,0,0,.25);pointer-events:none;">);
let curFid = null; // 当前正在显示提示的字段ID
Slide 11
代码示例 function showTip(fid, e) { // 检查映射中是否存在该字段的提示信息 if (!tipMap[fid]) return; curFid = fid; // 设置提示文本内容 $tip.text(tipMap[fid]) // 定位提示框于鼠标光标右下方15像素处 .css({ left: e.clientX + 15, top: e.clientY + 15 }) // 淡入动画显示提示框 .stop(true, true).fadeIn(200); } / 隐藏提示框 */ function hideTip() { curFid = null; // 隐藏提示框 $tip.stop(true, true).hide(); } In(200); } / 隐藏提示框 */ function hideTip() { curFid = null; // 隐藏提示框 $tip.stop(true, true).hide(); }### Slide 12 代码示例 // 将提示框添加到页面body中 $('body').append($tip) // 事件委托：监听鼠标进入特定控件的事件 .on('mouseenter', '.wea-browser,' + // 浏览按钮控件 '.ant-select-selection,' + // 下拉选择框控件 '.wea-date-picker', // 日期控件 function (e) { const $hid = $(this).closest('.wea-field').find('input[type="hidden"]'); if (!$hid.length) return; showTip($hid.attr('id'), e); }) // 鼠标移动时，实时更新提示框位置使其跟随鼠标 .on('mousemove', function (e) { if (curFid) $tip.css({ left: e.clientX + 15, top: e.clientY + 15 }); }) // 事件委托：监听鼠标离开控件的事件 .on('mouseleave', '.wea-browser,.ant-select-selection,.wea-date-picker', function (e) { if (!$(e.toElement).closest('.ant-calendar').length) hideTip(); }); // 监听文档上的鼠标点击事件，点击页面任意处即隐藏提示框 $(document).on('mousedown', hideTip); })();
Slide 13
志达宇泛 见著于微 感谢您的信任与支持！ 我们始终努力提供好用的移动办公平台
🖼️ 提取的插图 (共 16 张)
