Style tooltip box when hover function

v6
1

Hello,

I have implemented the functionality of a tooltip box when hovering functions in code editor v6, using Angular.
The code editor changes color whenever the navigation mode goes from dark to light and vice-versa. However, the tooltip box it’s always the same color. Is there a way of styling this tooltip box’s background and text color?

This is my code (I’ve omitted some parts to simplify it):

// THEMES
import {oneDark} from "@codemirror/theme-one-dark";
import {basicLight} from "cm6-theme-basic-light";

/* Other essential imports ... */

initCodeMirror() {
	const theme = this.getTheme() === 'dark' ? oneDark : basicLight;
	let editorTheme = new Compartment();

	const wordHover = hoverTooltip((view, pos, side) => {
      let {from, to, text} = view.state.doc.lineAt(pos)
      let start = pos, end = pos

      while (start > from && /\w/.test(text[start - from - 1])) start--
      while (end < to && /\w/.test(text[end - from])) end++

      if (start == pos && side < 0 || end == pos && side > 0)
        return null

      let word = text.slice(start - from, end - from);
      if (this.isInFunctions(word)){

        let text = "tooltip info text"

        return {
          pos: start,
          end,
          above: false,
          create(view) {
            let dom = document.createElement("tag-div")
            dom.className = "cm-tooltip-cursor"
            EditorView.baseTheme({
              ".cm-tooltip-lint": {
                width: "80%",
              },
              ".cm-tooltip-cursor": {
                border: "none",
                padding: "5px",
                borderRadius: "4px",
                "& .cm-tooltip-arrow:before": {
                  borderTopColor: "#66b !important"
                },
                "& .cm-tooltip-arrow:after": {
                  borderTopColor: "transparent",
                }
              }
            })
            dom.textContent = text
            return {dom}
          }
        }
      }

      return null;

    })

    let state = EditorState.create({
    	doc: /* ... */
    	extensions: [
    		/* ... */
    		editorTheme.of(theme),
    		wordHover
    	]
    });

    let view = new EditorView({
    	state,
    	/* ... */
    });
    
}

And this is what it looks like at the moment with the dark mode and light mode:

darkModeTooltip

lightModeTooltip

Any ideas on how I should do this? Or is it something I’m doing wrong?

Thank you so much in advanced.

2

See the mentions of &light and &dark in the docs for baseTheme.

3

Hello,
Thank you for the quick response.

I’ve tried to add both:

"&light": {
    backgroundColor: "red"
 }

and

"&dark": {
    backgroundColor: "red"
}

inside the “cm-tooltip-cursor” of the Editor.baseTheme({…}) but it doesn’t seem to be changing anything. Am I targeting well the hover box? Or is it something else I’m missing?

Thanks again

4

That doesn’t work. &light/&dark acts as a prefix to your regular selector. So target something like &light .cm-tooltip-cursor.

5

Still doesn’t work unfortunately. I changed it to:

EditorView.baseTheme({
              ".cm-tooltip-lint": {
                width: "80%"
              },
              ".cm-tooltip-cursor": {
                border: "none",
                padding: "5px",
                borderRadius: "4px",
                "& .cm-tooltip-arrow:before": {
                  borderTopColor: "#66b !important"
                },
                "& .cm-tooltip-arrow:after": {
                  borderTopColor: "transparent",
                  color: "red"
                }
              },
              "&light .cm-tooltip-cursor" : {
                color: "red"
              },
              "&dark .cm-tooltip-cursor" : {
                color: "red"
              }
            })

But the background is still dark for both dark and light theme :confused:

When I click on inspect I get these classes (I also tried targeting those, like “.cm-tooltip or .cm-tooltip-hover”, but nothing changed):

code

6

You’re styling color and you are surprised that this doesn’t affect the background of the elements?

7

Sorry, I had already tried with the backgroundColor and got no new results whatsoever, this was just another attempt that I forgot to undo.

I meant to say:

 "&light .cm-tooltip-cursor" : {
    backgroundColor: "red"
},
"&dark .cm-tooltip-cursor" : {
    backgroundColor: "red"
 }
8

@patricia Are you getting any results from your theme at all? The way your original post is written you’re not doing anything with the results from the call to EditorView.baseTheme(...).

9

Hello. Thank you for the response that was exactly it! I wasn’t using the results anywhere.

I changed the baseTheme() to the EditorState creation (inside extensions) and now the background is changing.

Thanks again!

10

Hello,

Regarding this topic once again… How can I target the class containing detailed information regarding the autocompletion box? I’ve tried to search for it but I can’t seem to find it.

I intend to change the background color as well:

detailInfo

Thanks again!

11

That’s .cm-tooltip.cm-completionInfo.