Apply custom class (attribute) to autocomplete tooltip

Is it possible to apply custom CSS classes or attributes to the tooltip generated by autocomplete? I know we can add classes to each option, but what about the .cm-tooltip wrapper?

No, that’s not something you can do.

Is there a reason this shouldn’t be supported? If it’s just not a priority, I’d be happy to submit a PR for it.

Why do you need it? Why does styling the tooltip with an editor-specific theme not work in your case?

I have a public API built on top of the CodeMirror API which allows certain aspects of the editor to be styled with regular CSS classes. I can always just expose the .cm-tooltip class when I need to target the tooltip, but I just figured it would make sense to have the ability to add a custom class here too since I can already do this on the editor and the tooltip options. Currently, this is the only element I have to specifically target a CM class with in order to apply my own styles. I know the preferred approach is to use themes, but I’m trying to make it easier for third parties to write styles in the formats that suit them best.

That seems too narrow a use case to adjust the library for. (But note that the correct class to target here is cm-tooltip-autocomplete, or you’ll target all tooltip elements.)

I’m actually targeting a few elements so that I can override some default styles:

  • .cm-tooltip (for styles that apply to all tooltips: background color, border radius, padding, etc)
  • ul (for the font family which defaults to monospace)
  • ul li.custom-class (class itself is not specific enough to override styles)

Do you think it could instead make sense to allow the TooltipView to be overridden completely?

At a glance, that sound like it would require exposing a bunch of internals (CompletionState and completionConfig at the very least).

This is a feature I can too vouch for. But I can see if it’s not possible to be implemented for a very small group of people.