在 Shiny 中使用 HTML 将 Tooltip 添加到 tabPanel答案

【问题标题】：Add Tooltip to tabPanel with HTML in Shiny在 Shiny 中使用 HTML 将 Tooltip 添加到 tabPanel
【发布时间】：2021-03-04 22:32:43
【问题描述】：

我正在尝试为 Shiny 应用程序添加工具提示/弹出框，并以这个问题为例 Add Tooltip to Tabs in Shiny

问题是我不能使用HTML() 来修改标题。我需要在行之间换行<br>，以及带有粗体和颜色的文本。通常它适用于我使用的所有标题，除了这个。

有什么想法吗？

library(shiny)

shinyApp(
  ui =
    navbarPage(tabsetPanel(
      tabPanel(span("Tab 1", title = HTML(
          "<span style='color: red;font-weight:bold;text-decoration: underline;'>Test</span>
           <span style='font-weight:bold;color:black;'> File</span> <br>'Another test'"
        )
       )),
      tabPanel("Tab 2"),
      tabPanel("Tab 3"),
      
    )),
  server = function(input, output) {
    
  }
)

【问题讨论】：

标签： html r shiny tooltip tabpanel

【解决方案1】：

虽然您不能使用HTML() 函数设置title 属性，但我相信您可以通过将data-toggle 属性添加到选项卡span，然后使用一点Javascript/ jquery 设置span 的工具提示属性以包含html: true：

library(shiny)

title_html <- "<span style='color: red;font-weight:bold;text-decoration: underline;'>Test</span>
<span style='font-weight:bold;color:black;'> File</span> <br>'Another test'"

shinyApp(
    ui = navbarPage(
        tags$script(HTML('
           $( document ).on("shiny:sessioninitialized", function(event) {
                $(\'span[data-toggle="tooltip"]\').tooltip({
                    html: true
                });      
           });'
        )),
        
        tabsetPanel(
            tabPanel(span("Tab 1", title = title_html, 
                          `data-toggle`="tooltip")),
            tabPanel("Tab 2"),
            tabPanel("Tab 3")
        )
    ),
    
    server = function(input, output) {
        
    }
)

然后，如果您想进一步自定义工具提示的外观/行为，您可以向该脚本标签添加其他选项（不仅仅是html: true），如Bootstrap tooltip docs 中所列。

【讨论】：