Allow embedders to designate link hover elements

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;

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.
      */