r-使用Shiny中的HTML将工具提示添加到tabPanel中

Question

我正在尝试为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) {

}
)

Answer 1

虽然不能使用HTML()函数设置title属性，但我相信您可以通过在选项卡span中添加data-toggle属性，然后使用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工具提示文档中所列。