shinyBS tooltip and pop-over font not visible

I am trying to add tooltips/popovers to shiny elements using the CRAN package shinyBS. Here is my code:

ui.R

library(shiny)
library(shinydashboard)
library(shinyBS)

dashboardPage(

  dashboardHeader(title = 'Dashboard', titleWidth = 400), 

  dashboardSidebar(width = 400,
                   sidebarMenu(
                     menuItem("Get Data", icon = icon("database"), tabName = "gd"))),

  dashboardBody(

    tabItems(

      tabItem(tabName = "gd",
              fluidRow(

                # add selectInput 
                box(selectInput(inputId = "gdselectInput4", label = "Fields", choices = "choice1", "choice2", multiple = TRUE), width = 2, background = "navy"),
                # add tooltip to selectInput element
                bsTooltip(id = "gdselectInput4", title = "Label", placement = "top",trigger = "hover",options = NULL),

                # add checkboxGroupInput
                box(checkboxGroupInput(inputId = "gdcheckboxInput1", label = "Annotation", choices = c("choice1", "choice2"), selected = FALSE), width = 2, background = "navy"),
                # add pop-over to checkboxGroupInput
                bsPopover(id = "gdcheckboxInput1", title = "Select", content = "Whatever", placement = "bottom", trigger = "hover", options = NULL)

              )
      )
    )
  ) 
)

server.R:

shinyServer(function(input, output, session){})

Here is the css file under www/styles.css:

.main-header .logo {
  font-weight: bold;
  font-size: 18px;
}

body {
  font-family: "Open Sans";
  font-size: 16px;
  line-height: 1.42857143;
  color: #666666;
}

.popover-title{
    color: #7a0000;
    font-size: 16px;
    background-color: #000000;
}

.popover-header{ 
    background: #ffff99; 
} 

.popover-content{ 
    background: #ffff99; 
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #000000;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

My issue is that I am unable to set the font color and background color of the tooltip and pop-over contents. The pop-over content appears with a white font color on a white background - even though I specify the font color and opacity in the styles.css file. Also, The tooltip content seems to be fixed - white font color on a black background.

Here is the screenshot of how it looks:

Tooltip on the first element (right next to Fields, the tooltip is labeled as Label):

Pop-over on the second element:

Solution

The documentation for shinydashboard does say that you can add CSS as you described, however I was also unable to get this to work. I believe their documentation is incorrect or we have both managed to miss-read it (which is also possible). It looks like shinydashboard never references this CSS file.

You can however include the CSS directly in your shiny App and this does work. This would be your minimum working example with the CSS you provided:

library(shiny)
library(shinydashboard)
library(shinyBS)

# Define UI for application that draws a histogram
ui <- dashboardPage(


  dashboardHeader(title = 'Dashboard', titleWidth = 400), 

  dashboardSidebar(width = 400,
                   sidebarMenu(
                     menuItem("Get Data", icon = icon("database"), tabName = "gd"))),

  dashboardBody(
    tags$head(tags$style(HTML('
                              .main-header .logo {
                              font-weight: bold;
                              font-size: 18px;
                              }

                              body {
                              font-family: "Open Sans";
                              font-size: 16px;
                              line-height: 1.42857143;
                              color: #666666;
                              }

                              .popover-title{
                              color: #7a0000;
                              font-size: 16px;
                              background-color: #000000;
                              }

                              .popover-header{ 
                              background: #ffff99; 
                              } 

                              .popover-content{ 
                              background: #ffff99; 
                              }

                              .tooltip .tooltiptext {
                              visibility: hidden;
                              width: 120px;
                              background-color: black;
                              color: #000000;
                              text-align: center;
                              border-radius: 6px;
                              padding: 5px 0;
                              position: absolute;
                              z-index: 1;
                              bottom: 100%;
                              left: 50%;
                              margin-left: -60px;
                              }

                              .tooltip:hover .tooltiptext {
                              visibility: visible;
                              opacity: 1;
                              }
    '))),

    tabItems(

      tabItem(tabName = "gd",
              fluidRow(

                # add selectInput 
                box(selectInput(inputId = "gdselectInput4", label = "Fields", choices = "choice1", "choice2", multiple = TRUE), width = 2, background = "navy"),
                # add tooltip to selectInput element
                bsTooltip(id = "gdselectInput4", title = "Label", placement = "top",trigger = "hover",options = NULL),

                # add checkboxGroupInput
                box(checkboxGroupInput(inputId = "gdcheckboxInput1", label = "Annotation", choices = c("choice1", "choice2"), selected = FALSE), width = 2, background = "navy"),
                # add pop-over to checkboxGroupInput
                bsPopover(id = "gdcheckboxInput1", title = "Select", content = "Whatever", placement = "bottom", trigger = "hover", options = NULL)

              )
      )
    )
  ) 
) 

# Define server logic required to draw a histogram
server <- shinyServer(function(input, output, session){}) 

# Run the application 
shinyApp(ui = ui, server = server)