Using `tippy` on cells

[shahreyar-abeer]

Hi there,

On the documentation, there is an example to use tippy with the headers.

library(htmltools)
library(dplyr)
library(tippy)

data <- as_tibble(mtcars[1:6, ], rownames = "car") %>%
  select(car:hp)

# See the ?tippy documentation to learn how to customize tooltips
with_tooltip <- function(value, tooltip, ...) {
  div(style = "text-decoration: underline; text-decoration-style: dotted; cursor: help",
      tippy(value, tooltip, ...))
}

reactable(
  data,
  columns = list(
    mpg = colDef(header = with_tooltip("mpg", "Miles per US gallon")),
    cyl = colDef(header = with_tooltip("cyl", "Number of cylinders"))
  )
)

I'm looking to use it in the cells instead. How should I do that? Mainly having trouble passing the element arg to tippy::tippy

[glin]

It'll be very similar for cells, but you'll have to use a cell render function instead. For example:

library(htmltools)
library(dplyr)
library(tippy)

data <- as_tibble(mtcars[1:6, ], rownames = "car") %>%
  select(car:hp)

# See the ?tippy documentation to learn how to customize tooltips
with_tooltip <- function(value, tooltip, ...) {
  div(style = "text-decoration: underline; text-decoration-style: dotted; cursor: help",
      tippy(value, tooltip, ...))
}

reactable(
  data,
  columns = list(
    mpg = colDef(cell = function(value) with_tooltip(value, "Miles per US gallon")),
    cyl = colDef(cell = function(value) with_tooltip(value, "Number of cylinders"))
  )
)

An equivalent but more straightforward way of writing this would be something like:

reactable(
  data,
  columns = list(
    mpg = colDef(
      cell = function(value) {
        div(style = "text-decoration: underline; text-decoration-style: dotted; cursor: help",
            tippy(value, "tooltip text"))
      }
    )
  )
)