Custom Class for Hover Tooltip Wrapper

When using hoverTooltip, there’s no built-in way to add a class to the cm-tooltip wrapper around your actual created DOM element.

  const dom = document.createElement('div');
  dom.className = 'MY_CUSTOM_CLASS';
  return dom;

results in a DOM like this, where your actual DOM element is wrapped inside the .cm-tooltip:

You can target .cm-tooltip-hover for custom styles (like to remove the background or border), however that will affect all hover tooltips.

The only way I’ve found to add a class to the actual tooltip wrapper is like this:

    create(view) {
      let dom = document.createElement("div");
      dom.className = 'MY_CUSTOM_CLASS';
      dom.textContent = text.slice(start - from, end - from);
      return {
        mount() {
          // Add class to the parent wrapper on mount

Example on

This approach works, but feels wrong and prone to problems. Ideally there could be an option in hoverTooltip to add a class to the wrapper, much like autocompletion.config.tooltipClass


That tooltip element may be shared with other hover tooltips, so it seems like changing its style has the potential to create undesirable effects. What kind of thing are you trying to do?

Primarily I want to remove the .cm-tooltip border from the default theme for these particular tooltips as they have their own styles.

Are there any ways to do that for one set of hover tooltips without affecting other potential hover tooltips?

Not really, since those different hover tooltips might end up in the same wrapping tooltip.