shinyBS 工具提示和弹出字体不可见
shinyBS tooltip and pop-over font not visible
我正在尝试使用 CRAN 包 shinyBS
将 tooltips/popovers 添加到闪亮元素。这是我的代码:
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 文件中指定了字体颜色和不透明度。此外,工具提示内容似乎已修复 - 黑色背景上的白色字体颜色。
这是它的截图:
第一个元素的工具提示(紧挨着字段,工具提示标记为标签):
在第二个元素上弹出:
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)
我正在尝试使用 CRAN 包 shinyBS
将 tooltips/popovers 添加到闪亮元素。这是我的代码:
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 文件中指定了字体颜色和不透明度。此外,工具提示内容似乎已修复 - 黑色背景上的白色字体颜色。
这是它的截图:
第一个元素的工具提示(紧挨着字段,工具提示标记为标签):
在第二个元素上弹出:
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)