VTable使用问题：怎么自定义弹出框tooltip内容？

Question

鼠标hover到单元格上时，我想弹出关于这个单元格的上下文信息，并且tooltip提示框的样式完全自定义，这个使用VTable要怎么实现？

Answer 1

参考这个:

https://www.visactor.io/vtable/demo/example/component/tooltip...

const container=document.getElementById(CONTAINER_ID);
const popup = document.createElement('div');
Object.assign(popup.style, {
  position: 'fixed',
  width: '300px',
  backgroundColor: '#f1f1f1',
  border: '1px solid #ccc',
  padding: '20px',
  textAlign: 'left'
});
function showTooltip(infoList, x, y) {
  popup.innerHTML = '';
  popup.id = 'popup';
  popup.style.left = x + 'px';
  popup.style.top = y + 'px';
  const heading = document.createElement('h4');
  heading.textContent = '数据信息';
  heading.style.margin = '0px';
  popup.appendChild(heading);
  for (let i = 0; i < infoList.length; i++) {
    const info = infoList[i];
    const info1 = document.createElement('p');
    info1.textContent = info;
    popup.appendChild(info1);
  }
  // 将弹出框添加到文档主体中
  document.body.appendChild(popup);
}

function hideTooltip() {
  if (document.body.contains(popup)) {
    document.body.removeChild(popup);
  }
}
    fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_Pivot2_data.json')
    .then(res => res.json())
    .then(data => {
      const option = {
        records: data,
        rowTree: [
          {
            dimensionKey: 'Category',
            value: 'Furniture',
            hierarchyState: 'expand',
            children: [
              {
                dimensionKey: 'Sub-Category',
                value: 'Bookcases',
                hierarchyState: 'collapse'
              },
              {
                dimensionKey: 'Sub-Category',
                value: 'Chairs',
                hierarchyState: 'collapse'
              },
              {
                dimensionKey: 'Sub-Category',
                value: 'Furnishings'
              },
              {
                dimensionKey: 'Sub-Category',
                value: 'Tables'
              }
            ]
          },
          {
            dimensionKey: 'Category',
            value: 'Office Supplies',
            children: [
              {
                dimensionKey: 'Sub-Category',
                value: 'Appliances'
              },
              {
                dimensionKey: 'Sub-Category',
                value: 'Art'
              },
              {
                dimensionKey: 'Sub-Category',
                value: 'Binders'
              },
              {
                dimensionKey: 'Sub-Category',
                value: 'Envelopes'
              },
              {
                dimensionKey: 'Sub-Category',
                value: 'Fasteners'
              },
              {
                dimensionKey: 'Sub-Category',
                value: 'Labels'
              },
              {
                dimensionKey: 'Sub-Category',
                value: 'Paper'
              },
              {
                dimensionKey: 'Sub-Category',
                value: 'Storage'
              },
              {
                dimensionKey: 'Sub-Category',
                value: 'Supplies'
              }
            ]
          },
          {
            dimensionKey: 'Category',
            value: 'Technology',
            children: [
              {
                dimensionKey: 'Sub-Category',
                value: 'Accessories'
              },
              {
                dimensionKey: 'Sub-Category',
                value: 'Copiers'
              },
              {
                dimensionKey: 'Sub-Category',
                value: 'Machines'
              },
              {
                dimensionKey: 'Sub-Category',
                value: 'Phones'
              }
            ]
          }
        ],
        columnTree: [
          {
            dimensionKey: 'Region',
            value: 'West',
            children: [
              {
                value: 'Sales',
                indicatorKey: 'Sales'
              },
              {
                value: 'Profit',
                indicatorKey: 'Profit'
              }
            ]
          },
          {
            dimensionKey: 'Region',
            value: 'South',
            children: [
              {
                value: 'Sales',
                indicatorKey: 'Sales'
              },
              {
                value: 'Profit',
                indicatorKey: 'Profit'
              }
            ]
          },
          {
            dimensionKey: 'Region',
            value: 'Central',
            children: [
              {
                value: 'Sales',
                indicatorKey: 'Sales'
              },
              {
                value: 'Profit',
                indicatorKey: 'Profit'
              }
            ]
          },
          {
            dimensionKey: 'Region',
            value: 'East',
            children: [
              {
                value: 'Sales',
                indicatorKey: 'Sales'
              },
              {
                value: 'Profit',
                indicatorKey: 'Profit'
              }
            ]
          }
        ],
        rows: [
          {
            dimensionKey: 'Category',
            dimensionTitle: 'Catogery',
            width: 'auto'
          },
          {
            dimensionKey: 'Sub-Category',
            dimensionTitle: 'Sub-Catogery',
            width: 'auto'
          }
        ],
        columns: [
          {
            dimensionKey: 'Region',
            dimensionTitle: 'Region',
            headerStyle: {
              textStick: true
            },
            width: 'auto'
          }
        ],
        indicators: [
          {
            indicatorKey: 'Sales',
            caption: 'Sales',
            width: 'auto',
            showSort: false,
            headerStyle: {
              fontWeight: 'normal'
            },
            format: rec => {
              if (rec) {
                return '$' + Number(rec.Sales).toFixed(2);
              }
              return '';
            },
            style: {
              padding: [16, 28, 16, 28],
              color(args) {
                if (args.dataValue >= 0) {
                  return 'black';
                }
                return 'red';
              }
            }
          },
          {
            indicatorKey: 'Profit',
            caption: 'Profit',
            width: 'auto',
            showSort: false,
            headerStyle: {
              fontWeight: 'normal'
            },
            format: rec => {
              if (rec) {
                return '$' + Number(rec.Profit).toFixed(2);
              }
              return '';
            },
            style: {
              padding: [16, 28, 16, 28],
              color(args) {
                if (args.dataValue >= 0) {
                  return 'black';
                }
                return 'red';
              }
            }
          }
        ],
        corner: {
          titleOnDimension: 'row',
          headerStyle: {
            textStick: true
          }
        },
        widthMode: 'standard',
        rowHierarchyIndent: 20,
        rowExpandLevel: 1,
        dragHeaderMode: 'all'
      };
      const tableInstance = new VTable.PivotTable(document.getElementById(CONTAINER_ID), option);
      window.tableInstance = tableInstance;
      tableInstance.on('mouseenter_cell', args => {
        const { cellRange, col, row } = args;
        debugger;
        const value = tableInstance.getCellValue(col, row);
        const cellHeaderPaths = tableInstance.getCellHeaderPaths(col, row);
        const infoList= [];
        cellHeaderPaths.rowHeaderPaths?.forEach((headerDimension) => {
          infoList.push(
            headerDimension.indicatorKey
              ? headerDimension.indicatorKey + ': ' + value
              : headerDimension.dimensionKey + ': ' + headerDimension.value
          );
        });
        cellHeaderPaths.colHeaderPaths?.forEach((headerDimension) => {
          infoList.push(
            headerDimension.indicatorKey
              ? headerDimension.indicatorKey + ': ' + value
              : headerDimension.dimensionKey + ': ' + headerDimension.value
          );
        });
        const container=document.getElementById(CONTAINER_ID);
        const containerRect=container.getBoundingClientRect();

        if (!tableInstance.isHeader(col, row)) {
          showTooltip(infoList, cellRange?.left+containerRect.left, cellRange?.bottom+containerRect.top);
        } else {
          hideTooltip();
        }
      });
      tableInstance.on('mouseleave_cell', args => {
        const { cellRange, col, row } = args;
        hideTooltip();
      });
      tableInstance.on('mouseleave_table', args => {
        const { cellRange, col, row } = args;
        hideTooltip();
      });
    });

Answer 2

解决方案 Solution

提供一种比较灵活的方式：监听VTable实例的事件mouseenter_cell和mouseleave_cell事件，将自定义的dom展示和隐藏，并依据VTable事件参数中的cellRange计算展示tooltip的位置。他们官网有这个相应的demo：https://visactor.io/vtable/demo/example/component/tooltip_custom_content

代码示例 Code Example

 tableInstance.on('mouseenter_cell', args => {
        const { cellRange, col, row } = args;
        showTooltip(cellRange);//yourself function
});
tableInstance.on('mouseleave_cell', args => {
        const { cellRange, col, row } = args;
        hideTooltip();//yourself function
});

结果展示 Results

Online demo：https://visactor.io/vtable/demo/example/component/tooltip_cus...

相关文档 Related Documentation

表格tooltip demo：https://visactor.io/vtable/demo/example/component/tooltip_cus...

Tooltip教程：https://visactor.io/vtable/guide/components/tooltip

github：https://github.com/VisActor/VTable