结合shiny::markdown与tippy::tippy_this报错“must pass tooltip”求解决

问题根源 #

1. HTML标签语法错误：原myfile.md里的<span>标签多了一个逗号，导致data-tippy-content属性无法被正确解析
2. tippy_this()默认逻辑：该函数要求显式传入tooltip参数，若想通过元素自带的data-tippy-content属性定义提示内容，需要额外配置让tippy读取该属性

修正步骤 #

1. 修复myfile.md的HTML语法 #

# myfile.md
This is a <span class="tippy" data-tippy-content="markdown is a simple text format">markdown</span> document.

注：移除了<span>标签中class属性后的逗号，修正HTML语法错误

2. 调整Shiny应用代码 #

推荐使用tippy()函数替代tippy_this()，更灵活地配置从DOM元素读取提示内容：

library(shiny)
library(tippy)

shinyApp(
  ui = fluidPage(
    shiny::markdown(readLines("myfile.md")),
    tippy(
      selector = ".tippy",
      allowHTML = TRUE,
      # 配置tippy从元素的data-tippy-content属性读取提示内容
      content = function(reference) reference$getAttribute("data-tippy-content")
    )
  ),
  server = function(input, output, session) {}
)

如果坚持使用tippy_this()，可以通过init参数传入配置，同时将tooltip设为NULL：

library(shiny)
library(tippy)

shinyApp(
  ui = fluidPage(
    shiny::markdown(readLines("myfile.md")),
    tippy_this(
      ".tippy",
      tooltip = NULL,
      init = list(
        content = function(reference) reference.getAttribute("data-tippy-content"),
        allowHTML = TRUE
      )
    )
  ),
  server = function(input, output, session) {}
)

内容的提问来源于stack exchange，提问作者Karsten W.