如何为Shiny数据表中的Tooltip设置样式？

原生浏览器自带的title属性无法自定义样式，因此我们改用Shiny默认集成的Bootstrap Tooltip组件来实现需求：支持HTML内容实现文本加粗，同时通过CSS自定义Tooltip样式。

完整解决方案代码 #

library(shiny)
library(DT)

df <- as.data.frame(cbind(c("Var1", "Var2", "Var3"), c(10, 5, 45)))

rowCallback <- c(
  "function(row, data, num, index){",
  "  let tooltipText;",
  "  if(index === 0){",
  "    tooltipText = '<b>Tooltip 1</b>: some text';",
  "  } else if(index === 1){",
  "    tooltipText = '<b>Tooltip 2</b>: some text';",
  "  } else if(index === 2){",
  "    tooltipText = '<b>Tooltip 3</b>: some text';",
  "  }",
  "  $('td:eq(0)', row)",
  "    .attr('data-bs-toggle', 'tooltip')",
  "    .attr('data-bs-html', 'true')",
  "    .attr('data-bs-title', tooltipText);",
  "}"  
)

ui <- shiny::basicPage(
  # 自定义Tooltip样式的CSS
  tags$style(HTML("
    .tooltip {
      --bs-tooltip-bg: #2c3e50; /* 修改背景色 */
      --bs-tooltip-color: #ecf0f1; /* 修改文字颜色 */
      --bs-tooltip-border-radius: 4px; /* 圆角设置 */
      --bs-tooltip-padding: 8px 12px; /* 内边距调整 */
    }
  ")),
  
  div(dataTableOutput('table1'), 
      style="padding-left:50px; padding-right:50px"),
  
  # 动态初始化Tooltip，适配DT表格的异步渲染
  tags$script(HTML("
    $(document).on('shiny:value', function(event) {
      if(event.target.id === 'table1'){
        $('[data-bs-toggle=\"tooltip\"]').tooltip();
      }
    });
  "))
)

server <- function(input, output) {
  output$table1 <- renderDataTable({
    datatable(df, 
              rownames=F,
              options = list(dom = 't', pageLength = 20, 
                             scrollX = T,
                             rowCallback = JS(rowCallback))) 
  })
}

shinyApp(ui, server)

关键实现说明 #

• 文本加粗：在rowCallback中，用<b>标签包裹需要加粗的文本（如Tooltip 1），并通过data-bs-html="true"告知Bootstrap解析HTML内容。
• 样式自定义：通过Bootstrap提供的CSS变量直接修改Tooltip的背景色、文字颜色、圆角等样式，无需复杂的选择器。
• 动态初始化：监听shiny:value事件，确保DT表格渲染完成后再初始化Tooltip，避免因表格异步加载导致的Tooltip失效问题。

内容的提问来源于stack exchange，提问作者DanB