Apply custom class (attribute) to autocomplete tooltip

v6
1

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?

2

No, that’s not something you can do.

3

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.

4

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

5

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.

6

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.)

7

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)
  • .cm-tooltip.cm-tooltip-autocomplete ul (for the font family which defaults to monospace)
  • .cm-tooltip.cm-tooltip-autocomplete 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?

8

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

9

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.

2 Likes
10

For future searchers, there’s now a tooltipClass property for autocompletion to customize the class: CodeMirror Reference Manual