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

更改大小、形状、颜色等...