title: Passing mouseover through element
body: <p>I'm working on a regex-analyzer that has syntax highlighting as a feature.</p>
  
  <p>My site uses an overlay of two contenteditable divs.</p>
  
  <p><img src="https://i.stack.imgur.com/QHQCw.png" alt="enter image description here"></p>
  
  <p>Because of the difficulty in getting the cursor position and maintaining that even as tags are added and subtracted, I decided the best route was to have two contenteditable divs, one on top of the other. The first (<code>#rInput</code>) is pretty plain. If not for some nuisance problems that made me switch from a textarea, it could be a textarea. The second (<code>#rSyntax</code>) gets its value from <code>rInput</code> and provides syntax highlighting. I make sure that both are always scrolled to the same position so that the overlay is perfect (However, I also use a transparent (<code>rgba(...)</code>) font on <code>rSyntax</code>, so that if a momentary sync-delay should occur, the text is still legible.)</p>
  
  <p>In the lower portion snapshot above, the code of the contenteditable <code>rSyntax</code> is this:</p>
  
  <pre><code>&lt;span class="cglayer"&gt;(test&lt;span class="cglayer"&gt;(this)&lt;/span&gt;string)&lt;/span&gt;
  </code></pre>
  
  <p>While <code>rInput</code>, positioned exactly on top, contains only this</p>
  
  <pre><code>(test(this)string)
  </code></pre>
  
  <p>The problem with this method is that I want to offer some alt-tooltips (or a javascript version) when a user mouses over. When the user mouses over <code>rInput</code>, I would like to pass the mouseover event to elements of <code>rSyntax</code>.</p>
  
  <p>I'd like mousing over <code>(test ... string)</code> to show "Capturing group 1", while mousing over <code>(this)</code> would show "Capturing group 2", or if it were <code>(?:test)</code>, it would say "Non-capturing group".</p>
  
  <p>The terminology is a little tough because searching for things like "above" and "below" pulls up a lot of results that have nothing to do with <code>z-index</code>.</p>
  
  <p>I did find the css property <code>pointer-events</code> which sounded ideal for the briefest moment but doesn't allow you to filter pointer events (set <code>rInput</code> to receive clicks, scrolls, but pass <code>mouseover</code> through to <code>rSyntax</code> and its child-elements.</p>
  
  <p>I found <code>document.elementFromPoint</code> which may offer a solution but I'm not really sure how. I thought I would try <code>document.getElementById('rInput').getElementFromPoint(mouseX,mouseY)</code>, but this function is not available to child elements.</p>
  
  <p>Theoretically, I could hide the <code>rInput</code> on mousemove, using a setTimeout to put it back quickly, and then a tooltip should appear when mousing over child elements of <code>rSyntax</code>, but that doesn't seem like the best solution because I don't want <code>rSyntax</code> to be clickable. Clicks should always go to <code>rInput</code>.</p>
  
  <p>It's possible to disable the mouseover wizardry while <code>rInput</code> has the focus, but then tooltips from <code>rSyntax</code> won't work, and though I haven't tried this method, I'm not sure if passing a click event from <code>rSyntax</code> to <code>rInput</code> would position the cursor properly.</p>
  
  <p>Is there a method to make this work?</p>