2

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

用户界面

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 文件中指定了字体颜色和不透明度。此外，工具提示内容似乎是固定的 - 黑色背景上的白色字体颜色。

这是它的外观截图：

第一个元素上的工具提示（在字段旁边，工具提示被标记为标签）：

工具提示

在第二个元素上弹出： 在此处输入图像描述

4

1 回答 1

3

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)
于 2017-04-06T00:57:53.537 回答