in src/tooltipServiceWrapper.ts [89:206]
public addTooltip<T>(
selection: Selection<d3.BaseType, any, d3.BaseType, any>,
getTooltipInfoDelegate: (args: ITooltipEventArgs<T>) => VisualTooltipDataItem[],
getDataPointIdentity: (args: ITooltipEventArgs<T>) => ISelectionId,
reloadTooltipDataOnMouseMove?: boolean): void {
if (!selection || !this.visualHostTooltipService.enabled()) {
return;
}
let rootNode = this.rootElement;
// Mouse events
selection.on("mouseover.tooltip", () => {
// Ignore mouseover while handling touch events
if (!this.canDisplayTooltip(d3Event)) {
return;
}
let tooltipEventArgs = this.makeTooltipEventArgs<T>(rootNode, true, false);
if (!tooltipEventArgs) {
return;
}
let tooltipInfo = getTooltipInfoDelegate(tooltipEventArgs);
if (tooltipInfo == null) {
return;
}
let selectionId = getDataPointIdentity(tooltipEventArgs);
this.visualHostTooltipService.show({
coordinates: tooltipEventArgs.coordinates,
dataItems: tooltipInfo,
identities: selectionId ? [selectionId] : [],
isTouchEvent: false,
});
});
selection.on("mouseout.tooltip", () => {
this.visualHostTooltipService.hide({
immediately: false,
isTouchEvent: false,
});
});
selection.on("mousemove.tooltip", () => {
// Ignore mousemove while handling touch events
if (!this.canDisplayTooltip(d3Event)) {
return;
}
let tooltipEventArgs = this.makeTooltipEventArgs<T>(rootNode, true, false);
if (!tooltipEventArgs) {
return;
}
let tooltipInfo: VisualTooltipDataItem[];
if (reloadTooltipDataOnMouseMove) {
tooltipInfo = getTooltipInfoDelegate(tooltipEventArgs);
if (tooltipInfo == null) {
return;
}
}
let selectionId = getDataPointIdentity(tooltipEventArgs);
this.visualHostTooltipService.move({
coordinates: tooltipEventArgs.coordinates,
dataItems: tooltipInfo,
identities: selectionId ? [selectionId] : [],
isTouchEvent: false,
});
});
// --- Touch events ---
let touchStartEventName: string = TooltipServiceWrapper.touchStartEventName();
let touchEndEventName: string = TooltipServiceWrapper.touchEndEventName();
let isPointerEvent: boolean = TooltipServiceWrapper.usePointerEvents();
selection.on(touchStartEventName + ".tooltip", () => {
this.visualHostTooltipService.hide({
isTouchEvent: true,
immediately: true,
});
let tooltipEventArgs = this.makeTooltipEventArgs<T>(rootNode, isPointerEvent, true);
if (!tooltipEventArgs) {
return;
}
let tooltipInfo = getTooltipInfoDelegate(tooltipEventArgs);
let selectionId = getDataPointIdentity(tooltipEventArgs);
this.visualHostTooltipService.show({
coordinates: tooltipEventArgs.coordinates,
dataItems: tooltipInfo,
identities: selectionId ? [selectionId] : [],
isTouchEvent: true,
});
});
selection.on(touchEndEventName + ".tooltip", () => {
this.visualHostTooltipService.hide({
immediately: false,
isTouchEvent: true,
});
if (this.handleTouchTimeoutId) {
clearTimeout(this.handleTouchTimeoutId);
}
// At the end of touch action, set a timeout that will let us ignore the incoming mouse events for a small amount of time
// TODO: any better way to do this?
this.handleTouchTimeoutId = setTimeout(() => {
this.handleTouchTimeoutId = undefined;
}, this.handleTouchDelay);
});
}