SharePoint 2010自定义列表表单添加悬停字段帮助的方案咨询

Hey there! I’ve dealt with this exact issue before—standard tooltips disappearing too fast can be super frustrating, especially when you can’t use InfoPath or Overlib doesn’t play nice with SharePoint’s code. Let’s break down a couple of reliable, compatible solutions you can implement right in SharePoint Designer:

方案1：纯HTML+CSS自定义悬停提示（无外部依赖） #

这是最稳妥的方法，完全不需要额外库，兼容性拉满，而且你可以完全控制提示框的样式和显示时长。

操作步骤： #

1. 打开SharePoint Designer，找到你编辑的自定义表单，切换到代码视图。
2. 定位到需要添加帮助信息的字段标签（比如<label for="YourFieldID">字段名称</label>），给它加上data-tooltip属性，填入你的帮助文本：

   <label for="YourFieldID" data-tooltip="这里是详细的帮助说明，支持<br/>多行文本哦！">字段名称</label>
   

3. 在表单的<head>标签里插入这段CSS样式（如果没有<head>，可以在表单顶部添加）：

   /* 自定义悬停提示样式 */
   [data-tooltip] {
     position: relative;
     cursor: help; /* 鼠标变成问号，提示用户可点击/悬停 */
   }
   
   /* 提示框内容 */
   [data-tooltip]:hover::after {
     content: attr(data-tooltip);
     position: absolute;
     bottom: 130%; /* 调整提示框在元素上方的位置 */
     left: 50%;
     transform: translateX(-50%);
     background-color: #2d3748;
     color: #fff;
     padding: 10px 14px;
     border-radius: 6px;
     white-space: pre-line; /* 支持换行 */
     z-index: 9999;
     width: 300px; /* 自定义提示框宽度 */
     box-shadow: 0 4px 8px rgba(0,0,0,0.15);
   }
   
   /* 提示框的小箭头 */
   [data-tooltip]:hover::before {
     content: "";
     position: absolute;
     bottom: 115%;
     left: 50%;
     transform: translateX(-50%);
     border: 7px solid transparent;
     border-top-color: #2d3748;
   }
   

4. 保存表单，刷新页面测试——现在只要鼠标悬停在字段标签上，提示框就会一直显示，直到你移开鼠标，完全解决“消失过快”的问题。

方案2：利用SharePoint原生Tooltip组件（更贴合SP风格） #

如果你想要和SharePoint自带UI风格一致的提示框，可以用SP原生的SP.UI.Tooltip组件，它支持自定义延迟显示/隐藏，完全兼容SharePoint环境。

操作步骤： #

1. 同样在SharePoint Designer的代码视图中，给目标字段的标签或输入框添加一个class和data-tooltip属性：

   <label for="YourFieldID" class="sp-custom-tooltip" data-tooltip="这是原生风格的帮助提示">字段名称</label>
   

2. 在表单底部（</form>标签之前）插入这段JavaScript：

   // 确保SharePoint的Tooltip脚本加载完成
   SP.SOD.executeFunc('sp.ui.tooltip.js', 'SP.UI.Tooltip', function() {
     // 遍历所有带自定义提示的元素
     document.querySelectorAll('.sp-custom-tooltip').forEach(function(el) {
       var tooltipText = el.getAttribute('data-tooltip');
       // 创建Tooltip，设置延迟参数
       SP.UI.Tooltip.create(el, tooltipText, {
         showDelay: 100,    // 鼠标悬停后100ms显示提示
         hideDelay: 600,    // 鼠标移开后600ms隐藏，避免误触消失
         width: 280         // 提示框宽度
       });
     });
   });
   

3. 保存并测试——这个提示框会和SharePoint系统自带的提示风格统一，而且延迟隐藏的设置完美解决了消失过快的问题。

注意事项 #

• 如果你用的是较旧的SharePoint版本（比如2013），确保SP.SOD.executeFunc的调用路径正确，部分版本可能需要调整脚本名称。
• 测试时记得清除浏览器缓存，避免旧代码干扰。

内容的提问来源于stack exchange，提问作者pinkstonmatt