How to change the tippy style for code annotations?

[muellerzr]

Description

I've modified my css to achieve the following:

via:

code.sourceCode .code-annotation-anchor {
   margin-top: 2px;
   margin-left: 2px;
   left: -12px;
   position: absolute;
}

.sourceCode > .python {
   padding-left: 1em;
}

But it'd be really nice if there were a way to change the tippy style so that it can be on the left, not the right and actually work with the CSS. (and not cover the code!) In all my digging of the HTML being used, I couldn't find where to modify it at. Where does quarto set the style that it uses for tippy? Even if I have to manually modify it for the time being until Quarto supports something like this, it'd be wonderful if I could be shown how.

[mcanouil]

Could you share a small self-contained "working" (reproducible) example to work with, i.e., a complete Quarto document or a Git repository? Thanks.

You can share a Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).

````qmd
---
title: "Reproducible Quarto Document"
format: html
---

This is a reproducible Quarto document using `format: html`.
It is written in Markdown and contains embedded R code.
When you run the code, it will produce a plot.

```{r}
plot(cars)
```

The end.
````

[muellerzr]

Sure.

In the qmd:

---
title: Shinylive in Quarto example
format: 
  html:
    css: "styles.css"

code-annotations: select
---
```{.python}
def hello_world(): # <1>
  "Something that prints Hello World" # <1>
  print("Hello world!") # <2>

hello_world() # <2>
```

1. Something to highlight
2. Another thing to highlight

In the styles.css:

code.sourceCode .code-annotation-anchor {
   margin-top: 2px;
   margin-left: 2px;
   left: -12px;
   position: absolute;
}

.sourceCode > .python {
   padding-left: 1em;
}

[dragonstyle]

There are tippy options for configuring the popover positioning which I think are probably hard coded when the library is initialized for code annotation. Positioning on the left would be a great enhancement...

[muellerzr]

Yep! Just curious if we can find out where they are and I can hack something together :) I found some stuff in Javascript that I thought did it, but upon modifying it to a different style it didn't wind up doing it properly, so just not sure where it gets set in terms of raw html/js there :)

[muellerzr]

E.g. here I was hoping to use left-start instead of what I think Quarto uses, right-start?

[muellerzr]

The CSS I showed renders the distance quite well I think in terms of the button etc, we just need to figure out how to modify tippy and I think we could get something going that would look quite nice for the left side 😄

[dragonstyle]

It default positions itself right with some fallback positions:

src/resources/formats/html/templates/quarto-html.ejs

const config = {
            allowHTML: true,
            content: contentFn,
            onShow: (instance) => {
              <% if (codeAnnotations === "select" || codeAnnotations === "hover") { %>selectCodeLines(instance.reference);<% } %>
              instance.reference.classList.add('code-annotation-active');
              window.tippy.hideAll();
            },
            onHide: (instance) => {
              <% if (codeAnnotations === "select" || codeAnnotations === "hover") { %>unselectCodeLines();<% } %>
              instance.reference.classList.remove('code-annotation-active');
            },
            maxWidth: 300,
            delay: [50, 0],
            duration: [200, 0],
            offset: [5, 10],
            arrow: true,
            <% if (codeAnnotations === "select") { %>trigger: 'click',<% } %>
            appendTo: function(el) {
              return el.parentElement.parentElement.parentElement;
            },
            interactive: true,
            interactiveBorder: 10,
            theme: '<%= tippyOptions.theme %>',
            placement: 'right',
            <% if (codeAnnotations === "select") { %>positionFixed: true,<% } %>
            popperOptions: {
              modifiers: [
              {
                name: 'flip',
                options: {
                  flipVariations: false, // true by default
                  allowedAutoPlacements: ['right'],
                  fallbackPlacements: ['right', 'top', 'top-start', 'top-end'],
                },
              },
              {
                name: 'preventOverflow',
                options: {
                  mainAxis: false,
                  altAxis: false
                }
              }
              ]        
            }      
          };
window.tippy(annoteTarget, config); 

You may be able to find some way to patch that initial config?

[muellerzr]

Thanks! This should let me hackify something until you all support something more concrete 😄

[muellerzr]

Wonderful @dragonstyle! Changing it to the following let that work perfectly 🥳

          placement: 'left',
          <% if (codeAnnotations === "select") { %>positionFixed: true,<% } %>
          popperOptions: {
            modifiers: [
            {
              name: 'flip',
              options: {
                flipVariations: false, // true by default
                allowedAutoPlacements: ['left'],
                fallbackPlacements: ['right', 'top', 'top-start', 'top-end'],
              },
            },

I'll roll with my fork version for now until something more concrete for a fix can be done. Thanks again for the hint!

[muellerzr]

I don't quite know enough on how to add that to an scss though I'm afraid, so I'll need to leave that to you guys 😞 Thank you again though for your help!

[mcanouil]

It's actually vanilla JavaScript, this is why currently there is no way to override the hardcoded configuration of tippy.js, without having to change the EJS template which is not exposed to end user..