Change code-annotations hover window's background colour

[deepakramani]

Hello everyone,
I'm facing a minor issue - I can't seem to change the background colour of the new code-annotation hover window inside a code block. I'm not able to find the related css variable.

Quarto version - 1.3.276 pre-release
Things tried so far:

1. Add background-color to dl.code-annotation-container-grid variable. No visible effect.
2. Add background-color/ background to .code-annotation-tip-content. Only the background portion surrounding the text gets colour filled.

Steps to reproduce:

Step 1 - Copy the below contents to an index.qmd. The code-annotations option is set to hover. Remove the \ before ```.

---
title: "Quarto- Minimal Working Example"
format: 
  html: 
    code-annotations: hover
---
I'm looking to change the background colour of the code-annotation's hover popup inside a code block. 
Currently it inherits the main body's background colour. 

\```{.bash filename="Terminal"}
quarto --version # <1>
\```
1. Checks quarto version

Step 2 - Copy the below contents to a _quarto.yml.

project:
  type: website
 
format:
  html:
    theme: [style.scss]
    highlight-style: dracula

Step 3 - Copy the below contents to a styles.scss.

/*-- scss:defaults --*/
$light-sage-green: #D1D9CE;

// use litera as the base
$theme: "litera" !default;

/*-- Base document colours --*/
$body-bg: $light-sage-green; // page background 

Step 4 - render or preview the index.qmd. On that page, hover over the code-annotation(1) inside the code block.
The annotated text("Checks quarto version") should appear with a background same as the document body's background colour. If possible, I'd like to change it so that the text is easily readable.

Things to observe:

When code-annotations is set to below(default), the annotated text appear below the code block. It makes sense to inherit the body's colour. When hover option is enabled, the text are just hidden and showed instead when the mouse hovers. So I don't know if it possible to change the background of the hover window. It might also be a new feature request.

As I'm a css novice, I seek your help please. Is it possible to annotated hover window's background? What is the related variable?
Any help is appreciated. Thank you.

[mcanouil]

You can use the following two SASS variables:

$code-annotation-higlight-color
$code-annotation-higlight-bg

From https://github.com/quarto-dev/quarto-cli/blob/main/src/resources/formats/html/bootstrap/_bootstrap-variables.scss#L208-L211

Note that these are not described currently in documentation.

Note that the scss is supposed to follow a specific structure, see https://quarto.org/docs/output-formats/html-themes-more.html.

• demo.qmd

---
title: "Quarto- Minimal Working Example"
format: 
  html:
    theme: [litera, style.scss]
    highlight-style: dracula
    code-annotations: hover
---

I'm looking to change the background colour of the code-annotation's hover popup inside a code block. 
Currently it inherits the main body's background colour. 

```{.bash filename="Terminal"}
quarto --version # <1>
```

1. Checks quarto version

• styles.scss

/*-- scss:defaults --*/
$code-annotation-higlight-color: #b22222;
$code-annotation-higlight-bg: #22b222;

[deepakramani]

Thanks for your suggestions. However, I don't think this is the output I expected.
My expected output is inside the code-annotation hover window. Yours changes the background of the line of the code inside the code block when I hover over the code annotation. The annotated text is still in body's bg colour.

Is there a css variable for the window?

[mcanouil]

No, but it's still css.

Note that I answered exactly what you said you wanted to do.

I can't seem to change the background colour of the new code-annotation hover window inside a code block.

[mcanouil]

The file with theming of the bubble annotation ("tippy box") for the code-annotations feature is https://github.com/quarto-dev/quarto-cli/blob/main/src/resources/formats/html/tippy/_tippy.scss.

[deepakramani]

Thanks I was able to change the tippy box's background colour using:

.tippy-box[data-theme~=quarto] {
    background-color: #c4a0a0
}

Note that I answered exactly what you said you wanted to do.

I chose the wrong terminologies to express my problem. I actually meant the annotation bubble(tippy box). I should've included a screenshot. Next time I will be clear.

Thanks for your help.