spec_popover() in Quarto

[radovan-miletic]

Hi @haozhu233,

I recently needed to use {kableExtra} with popover in Quarto framework. As Quarto relies on Bootstrap 5 (currently v5.1.3 ),kableExtra::spec_popover() function wouldn't work.
It turns out that solution might be simple with slight adjustments to the spec_popover function, note data-bs-toggle, data-bs-placement, and data-bs-content attributes in spec_bs_popover:

---
title: "{kableExtra} Popover in Quarto"
format: html
---

```{js popover-js, echo = FALSE}
// new bootstrap.Tooltip(document.body, {
  // selector: '[data-bs-toggle="tooltip"]'
// });
new bootstrap.Popover(document.body, {
  selector: '[data-bs-toggle="popover"]',
  html: true, 
  sanitize: false,                // optional, ex.: with html tables inside popover
  trigger: 'hover focus click'    // optional
});
```

```{css popover-css, echo = FALSE}
.popover-header {
    margin-top: 0;
}
```

```{r}
#| label: kableextra-spec-bs-popover
#| echo: false
spec_bs_popover <- function(content = NULL, title = NULL,
                         trigger = "hover", position = "right") {
  trigger <- match.arg(trigger, c("hover", "click", "focus", "manual"),
                       several.ok = TRUE)
  position <- match.arg(position, c("bottom", "top", "left", "right", "auto"),
                        several.ok = TRUE)
  popover_options <- paste(
    'data-bs-toggle="popover" data-container="body"',
    paste0('data-trigger="', trigger, '"'),
    paste0('data-bs-placement="', position, '"'),
    ifelse(!is.null(title), paste0('title="', title, '"'), ""),
    paste0('data-bs-content="', content, '"'))
  popover_options_list <- list(
    'data-bs-toggle' = 'popover',
    'data-container' = 'body',
    'data-trigger' = trigger,
    'data-bs-placement' = position,
    'data-bs-content' = content
  )
  if (!is.null(title)) {
    popover_options_list['title'] <- title
  }
  class(popover_options) <- "ke_popover"
  attr(popover_options, 'list') <- popover_options_list
  return(popover_options)
}
```

```{r}
#| results: asis
#| echo: false
popover_dt <- data.frame(
  position = c("top", "bottom", "right", "left"),
  stringsAsFactors = FALSE
)
popover_dt$`Hover over these items` <- kableExtra::cell_spec(
  paste("Message on", popover_dt$position),
  popover = spec_bs_popover(
    content = popover_dt$position,
    title = "Title",                      # default: title = NULL
    position = popover_dt$position
  ))
kableExtra::kbl(popover_dt, escape = FALSE) |>
  kableExtra::kable_paper("striped", full_width = FALSE)
```

`r kableExtra::text_spec("Popover: hover on me", underline = TRUE, color = "blue", popover = spec_bs_popover(content = "Hello", title = "Title"))`  

Output:

This hack works for me, but I'm wondering if kableExtra::spec_popover() function can be further improved for Bootstrap 5. The same stands for kableExtra::spec_tooltip() function.

Thank you!

P.S: If we inspect elements "on the page" an error related with kePrint.js will be spotted (see @haozhu233 's comment) :