Thoughts on why my gt output inside a qmd differ from it outside a qmd?

[boshek]

Description

I am trying to create a popover for a gt table in a quarto document. But I've gotten myself stumped with what is actually displayed in the table. If I create a gt table like this:

library(gt)

# Create a data frame
data <- data.frame(
  Name = c("Alice"),
  Details = c(
    htmltools::HTML(
      '<span class="popover-trigger" data-bs-toggle="popover" data-bs-title="Alice" data-bs-content="<a href=\'https://www.example.com\'>Visit Example.com</a>" data-bs-html="true">Click me</span>'
    )
  )
)

# Create the table
table <- data %>%
  gt() %>%
  fmt_markdown(
    columns = c(Details)
  )

table

I get a table that looks like this:

It doesn't have the popover behaviour but that's expected as I haven't defined the class. Now if I turn around try to do the same thing but within a qmd I get a slightly different result:

---
title: "Tooltips"
format: html
include-after-body:
  - text: |
      <script>
        // Initialize the popovers for all elements with the "popover-trigger" class
        var popoverTriggers = document.querySelectorAll(".popover-trigger");
        popoverTriggers.forEach(function (popoverTrigger) {
          new bootstrap.Popover(popoverTrigger);
        });

        // Add a single click event listener to the document to close any popover
        document.addEventListener("click", function (event) {
          popoverTriggers.forEach(function (popoverTrigger) {
            if (!popoverTrigger.contains(event.target)) {
              // Close the popover if the clicked element is not the trigger or popover content
              var popover = bootstrap.Popover.getInstance(popoverTrigger);
              if (popover) {
                popover.hide();
              }
            }
          });
        });
      </script>
---




```{r}
library(gt)

# Create a data frame
data <- data.frame(
  Name = c("Alice"),
  Details = c(
    htmltools::HTML(
      '<span class="popover-trigger" data-bs-toggle="popover" data-bs-title="Alice" data-bs-content="<a href=\'https://www.example.com\'>Visit Example.com</a>" data-bs-html="true">Click me</span>'
    )
  )
)

# Create the table
table <- data %>%
  gt() %>%
  fmt_markdown(
    columns = c(Details)
  )

table
```

This produces an output that looks like this:

So ✔️ on the popover but I get this text in the cell:

Click me">
Click me

I am posting this here as something about quarto is adding some text here. I am at a total loss for what this is and wanted to ask if anyone here had any thoughts about how one might unravel this.

Does anyone know about that "Click me">" gets added to my cell?

[boshek]

Ok if I change using gt::fmt_markdown to gt::fmt(columns = everything(), fns = function(x) x) this work for me. So the full qmd reprex is:

---
title: "Tooltips"
format: html
include-after-body:
  - text: |
      <script>
        // Initialize the popovers for all elements with the "popover-trigger" class
        var popoverTriggers = document.querySelectorAll(".popover-trigger");
        popoverTriggers.forEach(function (popoverTrigger) {
          new bootstrap.Popover(popoverTrigger);
        });

        // Add a single click event listener to the document to close any popover
        document.addEventListener("click", function (event) {
          popoverTriggers.forEach(function (popoverTrigger) {
            if (!popoverTrigger.contains(event.target)) {
              // Close the popover if the clicked element is not the trigger or popover content
              var popover = bootstrap.Popover.getInstance(popoverTrigger);
              if (popover) {
                popover.hide();
              }
            }
          });
        });
      </script>
---




```{r}
library(gt)

# Create a data frame
data <- data.frame(
  Name = c("Alice"),
  Details = c(
    htmltools::HTML(
      '<span class="popover-trigger" data-bs-toggle="popover" data-bs-title="Alice" data-bs-content="<a href=\'https://www.example.com\'>Visit Example.com</a>" data-bs-html="true">Click me</span>'
    )
  )
)

# Create the table
table <- data %>%
  gt() %>%
  gt::fmt(columns = c(Details), fns = function(x) x)

table
```

[cderv]

I opened #7501 which is only part of the issue.

Even with a fix for #7501, I am not sure exactly what happens with gt when complex HTML content are in a column. i'll wait for proper fix on #7501 before looking closer.

[boshek]

@cderv sorry for the dumb question but where do you see these lua warnings: #7501 (comment)

I ask because I think this would be a good thing for me to learn when trying to debug things in quarto.

[mcanouil]

See the troubleshooting guide: https://quarto.org/docs/troubleshooting/index.html

[cderv]

but where do you see these lua warnings

I am using Quarto pre-release 1.4 and latest dev version. Using latest version would have thrown the error to you too. but you are probably using latest quarto 1.3, as you did not have it.

Regarding the stack trace below the error, I get it by default when using dev version (from git), but you can activate following the info in guide indeed: https://quarto.org/docs/troubleshooting/#get-a-stack-trace

[cderv]

fmt_passthrough() won't work because it will escape the HTML string - which you don't want here.

@mcanouil in fact looking at the doc and after discussing with @rich-iannone, fmt_passthrough() as an escape argument to opt-out, and it could be used.

@rich-iannone I opened issue in gt about quarto / fmt_markdown interaction

• [quarto] disable_processing options should opt-out fmt_markdown specific output for quarto rstudio/gt#1488
• [quarto] data-qmd content should be escaped at least on double quotes rstudio/gt#1487

@boshek this should work in your case.

---
title: "Tooltips"
format: html
include-after-body:
  - text: |
      <script>
        // Initialize the popovers for all elements with the "popover-trigger" class
        var popoverTriggers = document.querySelectorAll(".popover-trigger");
        popoverTriggers.forEach(function (popoverTrigger) {
          new bootstrap.Popover(popoverTrigger);
        });

        // Add a single click event listener to the document to close any popover
        document.addEventListener("click", function (event) {
          popoverTriggers.forEach(function (popoverTrigger) {
            if (!popoverTrigger.contains(event.target)) {
              // Close the popover if the clicked element is not the trigger or popover content
              var popover = bootstrap.Popover.getInstance(popoverTrigger);
              if (popover) {
                popover.hide();
              }
            }
          });
        });
      </script>
---




```{r}
library(gt)

# Create a data frame
data <- data.frame(
  Name = c("Alice"),
  Details = '<span class="popover-trigger" data-bs-toggle="popover" data-bs-title="Alice" data-bs-content="<a href=\'https://www.example.com\'>Visit Example.com</a>" data-bs-html="true">Click me</span>'
)

# Create the table
table <- data %>%
  gt() %>%
  fmt_passthrough(Details, escape = FALSE)

table
```