diff --git a/src/browser/Linkifier2.ts b/src/browser/Linkifier2.ts index 085b0200..3f45e657 100644 --- a/src/browser/Linkifier2.ts +++ b/src/browser/Linkifier2.ts @@ -73,6 +73,20 @@ export class Linkifier2 implements ILinkifier2 { return; } + // Ignore the event if it's an embedder created hover widget + const composedPath = event.composedPath() as HTMLElement[]; + for (let i = 0; i < composedPath.length; i++) { + const target = composedPath[i]; + // Hit Terminal.element, break and continue + if (target.classList.contains('xterm')) { + break; + } + // It's a hover, don't respect hover event + if (target.classList.contains('xterm-hover')) { + return; + } + } + if (!this._lastBufferCell || (position.x !== this._lastBufferCell.x || position.y !== this._lastBufferCell.y)) { this._onHover(position); this._lastBufferCell = position; diff --git a/typings/xterm.d.ts b/typings/xterm.d.ts index 24c06961..c8901176 100644 --- a/typings/xterm.d.ts +++ b/typings/xterm.d.ts @@ -1134,7 +1134,9 @@ declare module 'xterm' { activate(event: MouseEvent, text: string): void; /** - * Called when the mouse hovers the link. + * Called when the mouse hovers the link. To use this to create a DOM-based hover tooltip, + * create the hover element within `Terminal.element` and add the `xterm-hover` class to it, + * that will cause mouse events to not fall through and activate other links. * @param event The mouse event triggering the callback. * @param text The text of the link. */