bs4dash show all tooltips (without hover) when header help == TRUE

25 Views Asked by At

bs4dash::dashboardPage has the help option that shows on the page header and, when toggled to TRUE, allows tooltips to show when hovering over the element. When toggled to FALSE, tooltips never show. I would like to change the tooltip behavior so that when the header help option is toggled to TRUE, users see all the tooltips/popovers at the same time, and they all stay up until the user toggles the help option off again. How can I do that?

1

There are 1 best solutions below

0
filups21 On

The bs4Dash help switch value (TRUE or FALSE) is stored in input$help_switch. Instead of showing a bunch of individual tooltips, I ended up just showing a modal popup for the whole page. Here's an example:

library(shiny)
library(bs4Dash)

shinyApp(
    ui = dashboardPage(
        header = dashboardHeader(
            title = dashboardBrand(
                title = "My dashboard",
                color = "primary",
                href = "https://adminlte.io/themes/v3",
                image = "https://adminlte.io/themes/v3/dist/img/AdminLTELogo.png"
            )
        ),
        sidebar = dashboardSidebar(
            bs4Dash::sidebarMenu(
                id = "sidebarmenu",
                bs4Dash::menuItem(
                    text = "Tab 1",
                    tabName = "tab1"
                ),
                bs4Dash::menuItem(
                    text = "Tab 2",
                    tabName = "tab2"
                ))
        ),
        body = dashboardBody(
            bs4Dash::tabItems(
                bs4Dash::tabItem(
                    tabName = "tab1",
                    lapply(getAdminLTEColors()[1:3], function(color) {
                        box(status = color)
                        })
                ),
                bs4Dash::tabItem(
                    tabName = "tab2",
                    lapply(getAdminLTEColors()[4:7], function(color) {
                        box(status = color)
                    })
                )
        )),
        controlbar = dashboardControlbar(),
        title = "DashboardPage"
    ),
    server = function(input, output) { 
        shiny::observe({
            if(input$help_switch == TRUE){
                if(input$sidebarmenu == "tab1"){
                    shiny::showModal(
                        ui = shiny::modalDialog(
                            title = "About this app",
                            "This is an important message for tab 1!"
                        ))
                } else if(input$sidebarmenu == "tab2"){
                    shiny::showModal(
                        ui = shiny::modalDialog(
                            title = "About this app",
                            "This is an important message for tab 2!"
                        ))
                }
            }
        })
    }
)

gif showing dashboard