Can I display a tooltip at cursor/mouse position?


I mean the kind of tooltip you get with atom.tooltips interface.

Is it possible to create a tooltip of some sorts at the cursor?

And while on topic, is it possible to display a tooltip with marker decoration? I can’t seem to access underlying DOM element with 1.0-pre API


Check the atom-lint package. It does exactly what you’re asking about.


Well, it indeed does, but it injects itself using workspaceView, which is deprecated as of v0.174.0 (at least). More than that, editor contents are rendered inside shadow-root now, which makes them virtually inaccessible, even if one gets hold of workspace view with atom.views.getView.

Or am I missing something?


I assume you’re missing something, because I’m using atom-lint with the ShadowDOM enabled and the tooltips work just fine.


Well, it works for now. atom.workspaceView gives access to editor’s shadow-root directly atm (via its methods). But it is deprecated, so it will probably disappear in future versions. I am not sure if atom-hlint is strictly dependent on it though, so I’ll try digging around it’s source some more.
Anyway, thanks for pointing me in a (possibly) right direction.


The only thing deprecated is atom.workspaceView because it uses jQuery. It is legal to use the new element version atom.views.getView(atom.workspace). So feel free to inject away.

Edit: Corrected atom.views.


Thank you for your input.

I sort of found a way to display tooltips at cursor position using linter as an example (docs for overlay marker decorations are not very specific, so I missed that). Gutter tooltips still elude me though, so if you have any suggestions, I will be happy to hear (or rather read) them.

The problem with workspaceView deprecation is not that one can’t get workspace DOM. That’s relatively easy. What is hard is getting TextEditor DOM to access e.g. gutter directly. workspaceView allowed this (via eachEditorView for example). But atom.views.getView(editor) returns DOM with most of it hidden away in shadow, leaving only underlayer and overlayer directly accessible. So now it becomes impossible to get to gutter, scroll view, etc. There might be alternative ways of achieving similar perceived behavior, so I’m currently looking for them.


Okay, scratch that, there is rootElement accessor in editor element, so it is possible. This simplifies things. Shadow DOM is a new concept to me, so I fumble a lot with it.


Use atom.views.getView(editor).shadowRoot to access the interior of the shadow dom. It returns the shadow root element.

I have just finished adding a breakpoint icon to the gutter so I know it works. Let me know if you want to see my code.


Thanks, but I think I’ve got it now.


linter puts tooltips at the cursor (blinky line in the editor where text goes when you type). How might you go about getting the position of the mouse cursor within an Atom package?


You can add an event listener to a mousemove event:

element.addEventListener 'mousemove', (event) ->
  # pageX/Y is the X/Y coordinate in the page of the mouse cursor
  {pageX, pageY} = event


A better option than addEventListener could be to use excellent SubAtom by Mark Hahn, which is on NPM and simplifies DOM event subscription (and especially un-subscription) greatly.

@lexicalunit, you can see how mouse tracking is implemented in ide-haskell (you can start from there, at least)


I’m trying to display a tooltip if a cursor is inside a certain word.

if cursor.isInsideWord
    cursor.onDidChangePosition (event) ->
      if event.cursor.isInsideWord({ wordRegex: "test" })
        div1 = document.createElement('div')
        Test.subscriptions.add atom.tooltips.add(Test.testView.getElement(), {title: 'This is a tooltip'})

However, I can’t seem to get this tooltip to display anywhere. I’d like for it to be displayed where the cursor is. Is this possible?

I’ll cut to the chase, I’m trying to port my silly sublime plugin to atom:

Is something like this possible?