>我需要在将鼠标悬停在dx-data-grid列中的每个单元格上时显示自定义的工具提示(dx-tooltip(。我使用 Angular 6,不使用 jQuery。有没有办法实现这一目标?
我正在努力为onCellHoverChanged/onCellPrepared事件上的每个单元格分配不同的id属性,我需要dx工具提示中的目标属性。
DX-工具提示: (html(
<dx-tooltip target="#abc" showEvent="dxhoverstart" hideEvent="dxhoverend">
<div *dxTemplate="let d = d; of: 'content'">
<div class="tooltip-wrapper">
<p>my content!</p>
</div>
</div>
</dx-tooltip>
onCellHoverChanged 事件(组件 .ts(
onCellHoverChanged(e: any) {
if (e.rowType === "data" && e.column.dataField === "Type") {
e.cellElement.id = "abc";
}
}
使用此代码,我只能显示特定单元格的工具提示。我需要多个 ID 才能在列中显示不同的工具提示。开发极端版本是 18.2.6。
我通过以下方式解决了这个问题:
.html:
<dx-tooltip *ngIf="ToolTipText?.length > 0" [target]="TooltipTarget">
<div *dxTemplate="let data of 'content'">
{{ ToolTipText }}
</div>
</dx-tooltip>
组件.ts:
TooltipTarget : any;
ToolTipText :string = '';
onCellHoverChanged(event: any) {
if (event.rowType === "data" && event.column.dataField === "Type") {
this.TooltipTarget = event.cellElement;
if (event.eventType === 'mouseover') {
this.ToolTipText = event.data.Tooltip;
}
}