Tooltips / Popovers in reactable cell with bslib

Question

Since the bslib release 0.5.1 there is a feature to use bootstrap tooltips and popovers in shiny and markdown applications. This works fine and is really useful.

Now I wanted to use it inside the cells of a column in a reactable. Unfortunately, the table no longer renders after adding a tooltip or popver function.

Below is a small example:

library(reactable)
library(bslib)
library(bsicons)

data <- iris %>% 
  add_column(Text = NA)

reactable(
  data,
  columns = list(
    Text = colDef(html = T, show = T,
                  cell = function(index) {
                    tooltip(bs_icon("info-circle"), "Tooltip XYZ")
                    }
                  )
    )
)

Does anyone know if I'm doing something wrong? Or is it simply not possible (at the moment) ?

Answer 1

Since html = TRUE, colDef() is expecting raw html. You can pass raw html by converting tooltip to character string (https://glin.github.io/reactable/articles/cookbook/cookbook.html#insert-links)

library(reactable)
library(bslib)
library(bsicons)

data <- iris |>
  tibble::add_column(Text = NA)

page( # needed to load bslib libraries
  reactable(
    data,
    columns = list(
      Text = colDef(html = TRUE, cell = function(index) {
        as.character(tooltip(bs_icon("info-circle"), "Tooltip XYZ"))
      })
    )
  )
)