Easyui悬停组件

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

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

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

1. 基础用法

• HTML标记创建：

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

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

  $('#element').tooltip({
    position: 'right', // 提示框位置：left/right/top/bottom
    content: 'HTML内容', // 支持HTML
    trackMouse: 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}
部门：${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 $('
').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中频繁绑定事件，改用事件委托。