CODEWITHSUNDEEP
rshinyshinyjsshinybs
A. Suliman
A. Suliman

Reputation: 13125

Add Tooltip to navbarMenu in Shiny

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.

Upvotes: 1

Views: 896

Answers (2)

Takuro Ikeda
Takuro Ikeda

Reputation: 178

I found another solution using javascript. Perhaps it may be more useful. enter image description here

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

Upvotes: 1

Bertil Baron
Bertil Baron

Reputation: 5003

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!

Upvotes: 4

Related Questions