css - shinyBS tooltip and pop-over font not visible -

i trying add tooltips/popovers shiny elements using cran package shinybs. here 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 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 checkboxgroupinput                 bspopover(id = "gdcheckboxinput1", title = "select", content = "whatever", placement = "bottom", trigger = "hover", options = null)                )       )     )   )  )  

server.r:

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

here 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 unable set font color , background color of tooltip , pop-over contents. pop-over content appears white font color on white background - though specify font color , opacity in styles.css file. also, tooltip content seems fixed - white font color on black background.

here screenshot of how looks:

tooltip on first element (right next fields, tooltip labeled label):

pop-over on second element:

the documentation shinydashboard can add css described, unable work. believe documentation incorrect or have both managed miss-read (which possible). looks shinydashboard never references css file.

you can include css directly in shiny app , work. minimum working example css provided:

library(shiny) library(shinydashboard) library(shinybs)  # define ui application draws 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 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 checkboxgroupinput                 bspopover(id = "gdcheckboxinput1", title = "select", content = "whatever", placement = "bottom", trigger = "hover", options = null)                )       )     )   )  )   # define server logic required draw histogram server <- shinyserver(function(input, output, session){})   # run application  shinyapp(ui = ui, server = server)