Add Tooltip to navbarMenu in Shiny

Question

I would like to add a tooltip for navbarMenu in Shiny app. Similar question asked here but, there is no answer.Here is my reproducible code

library(shiny)
library(shinyBS)

ui <- shinyUI(fluidPage(
       sidebarLayout( 
           sidebarPanel(),

           mainPanel(tabsetPanel(

             navbarMenu("Tab1",bsTooltip(id="Tab1", title="Short description  for the tab", trigger = "hover"), 
                 tabPanel("Tab1.1"),       
                 tabPanel("Tab1.2")),

            tabPanel("Tab2",tabsetPanel(
                       tabPanel("Tab2.1"),       
                       tabPanel("Tab2.2"))),

            tabPanel("Tab3",tabsetPanel(
                       tabPanel("Tab3.1"),
                       tabPanel("Tab3.2"),
                       tabPanel("Tab3.3")))
)))))
server <- function(input, output) {}
shinyApp(ui = ui, server = server)

During my research I found this solution R Shiny: Use navbarPage with bsModal by shinyBS, but for bsModel. Also, there is a procedure mentioned here which is based in java-script.I know both solutions are for tabpanel but I believe it's the same problem, which is navbarMenu and tabpanel don't have an id.
I'm statistician and I don't have background in HTML or java-script to rewrite the attribute for the tab title or navbarMenu. I hope I phrase my question in a clear manner. Thanks in advance for your time and kind help.

score 4 · Accepted Answer · answered Nov 27 '17 at 10:36

you can use HTML wenn passing the Title of the Tabs. in this case I just pt the title in a span and added the attribute titlewhich is the attribute HTML uses default for mouse-overs. For me this is much sinpler the trying to add it over shinyBS.

library(shiny)
library(shinyBS)

ui <- shinyUI(fluidPage(
  sidebarLayout( 
    sidebarPanel(),

    mainPanel(tabsetPanel(

      navbarMenu(span("Tab1",title="Short description  for the tab" ),
                 tabPanel("Tab1.1"),       
                 tabPanel("Tab1.2")),

      tabPanel("Tab2",tabsetPanel(
        tabPanel("Tab2.1"),       
        tabPanel("Tab2.2"))),

      tabPanel("Tab3",tabsetPanel(
        tabPanel("Tab3.1"),
        tabPanel("Tab3.2"),
        tabPanel("Tab3.3")))
    )))))
server <- function(input, output) {}
shinyApp(ui = ui, server = server)

hope this helps!

Thank you very much. It's works also for tabpanel. Can you please also update the another question "Add Tooltip to Tab in Shiny", just for the future readers. — A. Suliman, Nov 27 '17 at 11:03

score 1 · Answer 2 · answered Oct 06 '22 at 12:55

I found another solution using javascript. Perhaps it may be more useful.

library(shiny)

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

Add Tooltip to navbarMenu in Shiny

2 Answers2