Adding a new "inline docs" feature


We received a feature request for a project where Codemirror is one of the main feature.

The customer want to be able to trigger a “show docs” feature. The behavior is someway similar to the autocomplete/hinter feature (we are already using) but the popup will only display data (no selection of items).

I’m wondering how is simple to add new feature like this to Codemirror and if looking at the hinter add-on can help.

If this is doable, can you point me to a guide or give me general direction on how to implement new plugins? Maybe just looking at hinter is enough?


Can you describe the “show docs” feature a bit more? The subject line makes it sound like you’re wanting to show “sub-documents” or something within the current document being edited.

Would love to know more. Thanks!


I think that subdocument is a too complex entity. I just need an overlay/advanced-tooltip, really similar to the ones provided by hinter plugin (but without any interaction at all).

The needed behavior is:

  • user move the cursor inside the editor
  • he press a key combination that trigger the plugin
  • a remote call to an API is performed through a callback/promise (again: same behavior of hinter plugin). Some data is sent to the API (only the token, or the whole document, still not defined).
  • remote API returns the text to display
  • plugin take data to display and visualize it in the overlay


Ah. This sounds similar to the “tooltip” style needs I have for my work with

The current JSON-LD Playground has a “tooltip” thing–which sounds like what you describe–but it’s pretty specific to that site/use-case. Building something more generic is on my list. Maybe we can collaborate! :grin:

In my case I need to trigger both the tooltip/overlay-thing and an autocomplete list. The autocomplete bit is done (in my case).

It doesn’t sound “hard” per se. I think it’s mostly about abstracting the pieces enough to make this reusable for more CodeMirror projects (i.e. package it as a plugin).


Thanks! It’s really near to what I need, I will probably look into this more.

My original question was also about how simple is to implements new features/plugin to codemirror, using the CodeMirror.registerHelper or maybe other methods.


More or less like this (afaik):