css - shinyBS 工具提示和弹出字体不可见

Question

我正在尝试使用 CRAN 包 shinyBS 向 Shiny 元素添加工具提示/弹出框。这是我的代码:

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)

              )
      )
    )
  ) 
) 

服务器.R:

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

这是 www/styles.css 下的 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;
}

我的问题是我无法设置工具提示和弹出内容的字体颜色和背景颜色。弹出内容在白色背景上显示为白色字体颜色 - 即使我在 styles.css 文件中指定了字体颜色和不透明度。此外，工具提示内容似乎是固定的 - 黑色背景上的白色字体颜色。

这是它的外观截图:

第一个元素上的工具提示(紧挨着字段，工具提示被标记为标签):

在第二个元素上弹出:

Answer 1

shinydashboard 的文档确实说您可以按照您的描述添加 CSS，但是我也无法让它工作。我认为他们的文档不正确，或者我们都设法误读了它(这也是可能的)。看起来 shinydashboard 从未引用过这个 CSS 文件。

不过，您可以将 CSS 直接包含在 Shiny 的应用程序中，这确实有效。这将是您提供的 CSS 的最小工作示例:

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)