ShinyBS工具提示和彈出字體不可見

Question

我正在嘗試使用CRAN軟件包shinyBS將工具提示/彈出窗口添加到發光元素中。 這是我的代碼：

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

這是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文件中指定了字體顏色和不透明度，但彈出式窗口的內容在白色背景上以白色字體顯示。 此外，工具提示內容似乎是固定的-黑色背景上的白色字體顏色。

這是它的外觀截圖：

第一個元素上的工具提示（在字段旁邊，該工具提示標記為Label）：

在第二個元素上彈出：

Answer 1

Shinydashboard的文檔確實說您可以按照您的描述添加CSS，但是我也無法使其正常工作。 我認為他們的文檔不正確，或者我們都設法錯讀了文檔（這也是可能的）。 看起來Shinydashboard從未引用此CSS文件。

但是，您可以將CSS直接包含在您的閃亮應用程序中，並且可以正常工作。 這是您提供的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)