Add Tooltip to tabPanel with HTML in Shiny

Question

I am trying to add tooltips/popovers for a Shiny application, and use this question as example Add Tooltip to Tabs in Shiny

The problem is I can't use HTML() to modify the title. I need to have a line break <br>between lines, and text with bold, color. Normally it worked for all of titles I used except this one.

Any thoughts?

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) {
    
  }
)

score 2 · Answer 1 · answered Jun 05 '21 at 00:58

While you can't set a title attribute using a HTML() function, I believe you can achieve your desired outcome by adding a data-toggle attribute to the tab span, and then using a little Javascript/jquery to set the span's tooltip properties to include 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) {
        
    }
)

Then, if you want to further customize the appearance/behavior of the tooltip, you can add other options (beyond just html: true) to that script tag, as listed in the Bootstrap tooltip docs.

Add Tooltip to tabPanel with HTML in Shiny

1 Answers1