VTable使用问题：怎么自定义弹出框tooltip内容？-灵析社区
型男不是我还是谁鼠标hover到单元格上时，我想弹出关于这个单元格的上下文信息，并且tooltip提示框的样式完全自定义，这个使用VTable要怎么实现？
导师小jio参考这个:
«"https://www.visactor.io/vtable/demo/example/component/tooltip..." (https://link.segmentfault.com/?enc=0WEMEjWWcplF1fjZ%2BVKpXg%3D%3D.elxWS0IE1q7Ug9s4EMeByYlJrSDBlW4QIQRHE344syfjYgu7IzxVQtsAWmhsWTLVV0HY4nZy7VMm%2F0Tf77cgCsmzGi0%2Bj2hQmZpJfAxv%2BiY%3D)
»
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 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();
});
});