fix: do not show the datatip when the mouse is too far away from a token

Directly inspired by Atom-IDE's handling of these edge cases:

https://github.com/facebookarchive/nuclide/blob/master/modules/atom-ide-ui/pkg/atom-ide-datatip/lib/DatatipManager.js#L79L94

lib/datatip-manager.js

@@ -257,6 +257,22 @@ module.exports = class DatatipManager {
       const component = this.editorView.getComponent();
       // the screen position returned here is always capped to the max width of the text in this row
       const screenPosition = component.screenPositionForMouseEvent(evt);
+      // the coordinates below represent X and Y positions on the screen of where the mouse event
+      // occured and where the capped screenPosition is located
+      const coordinates = {
+        mouse: component.pixelPositionForMouseEvent(evt),
+        screen: component.pixelPositionForScreenPosition(screenPosition),
+      };
+      const distance = Math.abs(coordinates.mouse.left - coordinates.screen.left);
+
+      // If the distance between the coordinates is greater than the default character width, it
+      // means the mouse event occured quite far away from where the text ends on that row. Do not
+      // show the datatip in such situations and hide any existing datatips (the mouse moved more to
+      // the right, away from the actual text)
+      if (distance >= this.editor.getDefaultCharWidth()) {
+        return this.hideDataTip();
+      }
+
       const point = this.editor.bufferPositionForScreenPosition(screenPosition);
       if ((this.currentMarkerRange === null) ||
            (!this.currentMarkerRange.containsPoint(point))) {