shinyWidget dropdownbutton 的 bstooltip 在打开时不会消失
bstooltip of shinyWidget dropdownbutton doesn't disappear when opened
我正在努力在我的程序中实现 shinyWidgets 下拉菜单,因为 A:它们看起来很棒
B:它们很容易制作。
我无法解决的问题是,如何使工具提示消息在下拉菜单打开后消失。
小部件按钮的源代码如下:
# tooltip
if (identical(tooltip, TRUE))
tooltip <- tooltipOptions(title = label)
if (!is.null(tooltip) && !identical(tooltip, FALSE)) {
tooltip <- lapply(tooltip, function(x) {
if (identical(x, TRUE))
"true"
else if (identical(x, FALSE))
"false"
else x
})
tooltipJs <- htmltools::tags$script(
sprintf(
"$('#%s').tooltip({ placement: '%s', title: '%s', html: %s, trigger: 'hover' });",
inputId, tooltip$placement, tooltip$title, tooltip$html
)
)
} else {
tooltipJs <- ""
}
我尝试了将延迟设置为 0 的解决方案,但它不起作用。
tooltip: { hideDelay: 0}
有人知道如何在小部件的模式对话框打开时使弹出窗口消失吗?
library("shiny")
library("shinyWidgets")
shinyApp(
ui = fluidPage(
tags$head(tags$style('#dropdown-menu-MyDDM {left: 100px;}
tooltip: {
hideDelay: 0
}')),
dropdownButton(label = "CLICK",
h5("HELLO"),
icon = icon("gear"),
# right = T,
inputId = "MyDDM",
circle = T, status = "info", size = "sm",
tooltip = tooltipOptions(title = "Click to change plot"), width = "600px")
),
server = function(input, output, session) {
}
)
shinyWidget
的开发版已经有了这个功能。
可以这样安装:
# From Github
# install.packages("devtools")
devtools::install_github("dreamRs/shinyWidgets")
代码的变化是这样的:
- "$('#%s').tooltip({ placement: '%s', title: '%s', html: %s });",
+ "$('#%s').tooltip({ placement: '%s', title: '%s', html: %s, trigger: 'hover' });",
这最终会为分配的 css class 推送此工具提示。
在开发版本中,悬停弹出警报消息确实消失了。
工具提示消息的样式可以这样完成:
tags$head(tags$style(HTML('.tooltip .tooltip-inner { max-width: 350px; border: solid; border-radius: 4px; border-width: 1px; border-color:#287fcc;
color: #339FFF; text-align: center; background-color: #ffffff; font-weight:bold; font-size: 12px; text-align:left; padding:12px; padding-left: 16px}
.tooltip {opacity: 1 !important;}
.tooltip.right .tooltip-arrow { border-right-color:#287fcc; }
.tooltip.left .tooltip-arrow { border-left-color:#287fcc; }
.tooltip.top .tooltip-arrow { border-top-color:#287fcc; }
.tooltip.bottom .tooltip-arrow { border-bottom-color:#287fcc; }' )))
下拉菜单的样式如下:
tags$head(tags$style('#dropdown-menu-Parameter-dropdown {left: 20px; top: 60px}'))
这里我更改了垂直和水平参数,但您也可以为颜色、边框等添加其他 css 元素...
下拉按钮的样式如下:
tags$head(tags$style('#Parameter-dropdown {border-radius: 6px; border-width:2px; background-color: white; border-color: #339FFF; color: #339FFF}'))
更改大小、形状、颜色等...
我正在努力在我的程序中实现 shinyWidgets 下拉菜单,因为 A:它们看起来很棒 B:它们很容易制作。
我无法解决的问题是,如何使工具提示消息在下拉菜单打开后消失。
小部件按钮的源代码如下:
# tooltip
if (identical(tooltip, TRUE))
tooltip <- tooltipOptions(title = label)
if (!is.null(tooltip) && !identical(tooltip, FALSE)) {
tooltip <- lapply(tooltip, function(x) {
if (identical(x, TRUE))
"true"
else if (identical(x, FALSE))
"false"
else x
})
tooltipJs <- htmltools::tags$script(
sprintf(
"$('#%s').tooltip({ placement: '%s', title: '%s', html: %s, trigger: 'hover' });",
inputId, tooltip$placement, tooltip$title, tooltip$html
)
)
} else {
tooltipJs <- ""
}
我尝试了将延迟设置为 0 的解决方案,但它不起作用。
tooltip: { hideDelay: 0}
有人知道如何在小部件的模式对话框打开时使弹出窗口消失吗?
library("shiny")
library("shinyWidgets")
shinyApp(
ui = fluidPage(
tags$head(tags$style('#dropdown-menu-MyDDM {left: 100px;}
tooltip: {
hideDelay: 0
}')),
dropdownButton(label = "CLICK",
h5("HELLO"),
icon = icon("gear"),
# right = T,
inputId = "MyDDM",
circle = T, status = "info", size = "sm",
tooltip = tooltipOptions(title = "Click to change plot"), width = "600px")
),
server = function(input, output, session) {
}
)
shinyWidget
的开发版已经有了这个功能。
可以这样安装:
# From Github
# install.packages("devtools")
devtools::install_github("dreamRs/shinyWidgets")
代码的变化是这样的:
- "$('#%s').tooltip({ placement: '%s', title: '%s', html: %s });",
+ "$('#%s').tooltip({ placement: '%s', title: '%s', html: %s, trigger: 'hover' });",
这最终会为分配的 css class 推送此工具提示。
在开发版本中,悬停弹出警报消息确实消失了。
工具提示消息的样式可以这样完成:
tags$head(tags$style(HTML('.tooltip .tooltip-inner { max-width: 350px; border: solid; border-radius: 4px; border-width: 1px; border-color:#287fcc;
color: #339FFF; text-align: center; background-color: #ffffff; font-weight:bold; font-size: 12px; text-align:left; padding:12px; padding-left: 16px}
.tooltip {opacity: 1 !important;}
.tooltip.right .tooltip-arrow { border-right-color:#287fcc; }
.tooltip.left .tooltip-arrow { border-left-color:#287fcc; }
.tooltip.top .tooltip-arrow { border-top-color:#287fcc; }
.tooltip.bottom .tooltip-arrow { border-bottom-color:#287fcc; }' )))
下拉菜单的样式如下:
tags$head(tags$style('#dropdown-menu-Parameter-dropdown {left: 20px; top: 60px}'))
这里我更改了垂直和水平参数,但您也可以为颜色、边框等添加其他 css 元素...
下拉按钮的样式如下:
tags$head(tags$style('#Parameter-dropdown {border-radius: 6px; border-width:2px; background-color: white; border-color: #339FFF; color: #339FFF}'))
更改大小、形状、颜色等...