Tooltip showing on focus state even if trigger is hover only

[dylancis]

Look like we can either set the display tooltip trigger option to "hover" or default "hover focus". However even setuping it to "hover" only, it is also unexpectedly displaying with 'focus' state. I am not sure to understand why.

Below an example with SelectInput widget. Select one of the option and move your move elsewhere (the focus state of the SelectInput should remains until we click elsewhere), the tooltip does not go away as we should expect.

library(shiny)
library(bsplus)

ui <- fluidPage(
  use_bs_tooltip(),

  titlePanel("Hello Shiny!"),          
  sidebarLayout(
    sidebarPanel(
      selectInput(inputId ="myid",
                                label = "list",
                                choices = c("a", "b", "c", "d"),
                                selected = "a") %>%
        bs_embed_tooltip(title =  "stay on focus....",
                         trigger = "hover")
    ),
    mainPanel(
    )
  )
)
server <- function(input, output) {
}
shinyApp(ui, server)

I have also attached a zip .mkv 20 seconds screen recording when you can see a reproducible live example: REC 2018-04-16-150608.zip

Once the cursor is not hovering anymore the SelectInput widget, I would like to tooltip do be hidden. Thank you for your help, Dylan

[dylancis]

After further tests the issue is everywhere where bs_embed_tooltip is used. once you click on a widget with the tooltip added this way, the tooltip will persists until you click somewhere on the screen.

[ijlyttle]

Sorry for not responding sooner.

My first thought is that this may be something that needs to be resolved at the Bootstrap level. This package can provide access to the Bootstrap API and show some examples, but I don't think it can do much beyond that.

Does the tooltip for the "Label with tooltip help" input at this app behave the way that you expect?

If so, could the shinyInput_label_embed() function be useful to you?

[dylancis]

Thanks @ijlyttle , shinyInput_label_embed() was indeed very much helpful. I was able to replace all of them in my app using this feature. However while it works fine in UI, how can we use it on the server side instead? I was hopping shinyInput_label_embed() had an id attribute so I can use shinyBS::addTooltip()on server side but I could not find a way to attached an id to this.

[ijlyttle]

Glad it helped! I have just pushed a update so that shiny_iconlink has an id.

Would (does) something like this work for you?

On the UI side

numericInput(inputId = "foo", label = "Enter a number", value = 0) %>%
  shinyInput_label_embed(
    shiny_iconlink(name = "info", id = "foo_help") 
  )

On the server side:

shinyBS::addTooltip(id = "foo_help", ...)

[dylancis]

Thank you very much @ijlyttle for your quick reply and update, I actually do not use shiny_iconlink() but selectInput(inputId = "portQualityGB", label = "Portfolio quality", choices = c("Bad", "Moderate", "Good"),selected = "Moderate") %>% shinyInput_label_embed(icon("info"))

Anything I could mirror from your above suggestion maybe ? I greatly appreciate your help on this.

[ijlyttle]

I think you should consider using shiny_iconlink() because:

• it wraps shiny::icon() in a link because tooltips and popovers (as I understand) like to operate on elements like links and buttons.
• it provides you with the means to supply an id

Here's the code:

> bsplus::shiny_iconlink

function(name = "info-circle", id = NULL, ...){

  if (!requireNamespace("shiny", quietly = TRUE)) {
    stop(
      "Shiny needed for this function to work. Please install it.",
      call. = FALSE
    )
  }

  htmltools::tags$a(shiny::icon(name = name, ...), id = id, href = "#")
}
<environment: namespace:bsplus>

[dylancis]

very useful and did the trick indeed. thank you very much once again.

[ijlyttle]

No problem!