bstooltip of shinyWidget dropdownbutton doesn't disappear when opened

Question

I am working on implementing shinyWidgets dropdown menus into my program because A: they look great B: they are easy to make.

The problem that I can't solve, is how to make the tooltip message disappear once the dropdownmenu is open.

the source code for the widget button is the following:

  # 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 <- ""
  }

I tried a solution to set the delay to 0, but it doesn't work.

tooltip: { hideDelay: 0}

Any one a clue how to make the popup disappear when modaldialog of the widget is open?

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

      }
    )

I added a picture with red arrow to clarify which one needs to hide. I guess it has to do with the focus forcing done by the dropdown panel — Mark, Jan 30 '18 at 12:39
the development version https://github.com/dreamRs/shinyWidgets has been updated for tooltip hover. Try installing it and check. — amrrs, Jan 30 '18 at 13:43
great it works! Do know what code makes it work that way? It might also solve another issue I have with another conflict of modal dialogs from another package — Mark, Jan 30 '18 at 14:23
The package developer has added a new argument to his function that enables .tooltip be displayed on hover — amrrs, Jan 30 '18 at 17:14

Mark · Answer 1 · 2018-02-16T13:52:56.303

With the dev version the hover popup alert message indeed goes away.

Styling of the tooltip message can be done this way:

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

Styling of the Dropdownmenu this way:

 tags$head(tags$style('#dropdown-menu-Parameter-dropdown {left: 20px; top: 60px}'))

here I change the vertical and horizontal parameter, but you can also add other css elements for colors, borders, etc...

Styling of the dropdownbutton this way:

 tags$head(tags$style('#Parameter-dropdown {border-radius: 6px; border-width:2px; background-color: white; border-color: #339FFF; color: #339FFF}'))

change size, shape, color, etc...

score 1 · Accepted Answer · answered Jan 31 '18 at 06:39

1

The development version of shinyWidget has got this functionality.

It can be installed like this:

# From Github
# install.packages("devtools")
devtools::install_github("dreamRs/shinyWidgets")

The change in the code is this:

-        "$('#%s').tooltip({ placement: '%s', title: '%s', html: %s });",
+       "$('#%s').tooltip({ placement: '%s', title: '%s', html: %s, trigger: 'hover' });",

Which ultimately pushes this tooltip for the assigned css class.

answered Jan 31 '18 at 06:39

amrrs

6,215
2
18
27

Haven't tested whether it works, but I went for the css styling approach I have been using for all my other elements. See my answer. Thanks for contribution to the issue though amrrs! – Mark Jan 31 '18 at 13:53
Won't help unfortunately with the other issue I mentioned. Its found here: https://stackoverflow.com/questions/48249608/how-to-focus-on-textinput-field-in-alert-combined-with-modaldialog-in-r. If you have an idea on that one I would much appreciate it amrrs – Mark Jan 31 '18 at 19:14

bstooltip of shinyWidget dropdownbutton doesn't disappear when opened

2 Answers2

Linked