Easyui悬停组件

在EasyUI中，没有直接命名为“悬停组件”的独立控件，但可通过其核心组件（如tooltip）或扩展功能实现悬停效果。以下是具体实现方式及示例：

一、EasyUI 官方悬停解决方案：Tooltip 组件

核心功能：在鼠标悬停时显示自定义提示信息，支持纯文本、HTML内容及样式定制。

1. 基础用法

• HTML标记创建：

  <a href="#" title="基础提示信息" class="easyui-tooltip">悬停查看提示</a>
  

• JavaScript初始化（灵活配置）：

  $('#element').tooltip({position: 'right', // 提示框位置：left/right/top/bottomcontent: '<strong>HTML内容</strong>', // 支持HTMLtrackMouse: true,  // 提示框跟随鼠标移动showDelay: 500,    // 显示延迟（毫秒）onShow: function(){ $(this).tooltip('tip').css('background', '#ffeb3b'); // 自定义样式}
  });
  

2. 高级配置项

属性/事件	说明
deltaX/deltaY	微调提示框位置（像素）
onUpdate	内容更新时触发，可用于动态加载数据
onPosition	位置变化时触发，返回当前坐标
showEvent	触发显示的事件（默认mouseenter，可改为click）

二、进阶场景：Datagrid 表格悬停扩展

在表格中实现行级悬停提示（如显示详细信息或图片预览），需结合Datagrid事件与Tooltip。

1. 监听行事件

$('#datagrid').datagrid({onLoadSuccess: function() {$('.datagrid-row').mouseover(function() {const rowData = $('#datagrid').datagrid('getSelected');// 动态生成提示内容（如从行数据中提取）const tooltipContent = `姓名：${rowData.name}<br>部门：${rowData.dept}`;$(this).tooltip({content: tooltipContent,position: 'right'}).tooltip('show');}).mouseout(function() {$(this).tooltip('hide');});}
});

2. 第三方扩展包（流云大神版）

引入扩展JS文件后，可直接通过rowTooltip属性配置：

$('#datagrid').datagrid({rowTooltip: function(index, row) {if (row.status === 'error') {return $('<div>').css('color', 'red').text('数据异常！');}}
});

三、自定义悬停样式

通过CSS覆盖默认样式，实现个性化提示框：

/* 修改提示框背景色与圆角 */
.tooltip-content {background: #2196F3 !important;border-radius: 4px !important;padding: 8px !important;
}

四、常见问题解决

1. 提示框不显示：

   • 检查是否遗漏easyui-tooltip类或JavaScript初始化代码。
   • 确认元素可访问（如未被display:none隐藏）。

2. 动态内容更新：

   • 使用update方法或触发onUpdate事件：

     $('#element').tooltip('update', '新内容');
     

3. 性能优化：

   • 对大量数据表格，避免在onLoadSuccess中频繁绑定事件，改用事件委托。