What is breaking the tooltips in this Quarto dashboard?

Question

I have some sparklines embedded in html tables in my reports. I have been experimenting with using Quarto dashboards now for my reports. However, the width of the sparkline tooltip text blows up to the entire width of the page.

I made a reproducible example with code from the reactable documentation: https://glin.github.io/reactable/articles/examples.html

Here is a snapshot and then the code.

reactable allows me to specify a css style for columns. Is there any css that could fix this? Or any additional specification to sparkline()?

---
title: tooltip test
format: dashboard
editor: source
---

```{r}
#| warning: false
#| message: false
library(reactable)
library(sparkline)
library(dplyr)
library(tippy)
```

```{r}
data <- chickwts %>%
  group_by(feed) %>%
  summarise(weight = list(weight)) %>%
  mutate(boxplot = NA, sparkline = NA)

reactable(
  data, 
  columns = list(
    weight = colDef(
      header = tippy("weight", "test tooltip"),
      cell = function(values) {
        sparkline(values, type = "bar", chartRangeMin = 0, chartRangeMax = max(chickwts$weight))
      }
    ),
    boxplot = colDef(
      header = tippy("box", "test tooltip"),
      cell = function(value, index) {
        sparkline(data$weight[[index]], type = "box")
      }
    ),
    sparkline = colDef(
      header = tippy("line", "test tooltip"),
      cell = function(value, index) {
        sparkline(data$weight[[index]])
      }
    )
  )
)
```

Answer 1

You could use the .jqstooltip class in css to change the max-width of your background tooltip like this:

---
title: tooltip test
format: dashboard
editor: source
---

```{css, echo = FALSE}
.jqstooltip { 
 min-width: 0px !important; 
 max-width: max-content !important; 
}
```

```{r}
#| warning: false
#| message: false
library(reactable)
library(sparkline)
library(dplyr)
library(tippy)
```

```{r}
data <- chickwts %>%
  group_by(feed) %>%
  summarise(weight = list(weight)) %>%
  mutate(boxplot = NA, sparkline = NA)

reactable(
  data, 
  columns = list(
    weight = colDef(
      header = tippy("weight", "test tooltip"),
      cell = function(values) {
        sparkline(values, type = "bar", chartRangeMin = 0, chartRangeMax = max(chickwts$weight))
      }
    ),
    boxplot = colDef(
      header = tippy("box", "test tooltip"),
      cell = function(value, index) {
        sparkline(data$weight[[index]], type = "box")
      }
    ),
    sparkline = colDef(
      header = tippy("line", "test tooltip"),
      cell = function(value, index) {
        sparkline(data$weight[[index]])
      }
    )
  )
)
```

Output: