Shiny中如何实现popify弹窗点击显示后移开鼠标自动关闭

可以通过添加少量自定义JavaScript的方式实现需求，完全保留点击图标才显示弹窗的规则，同时实现鼠标移开图标后自动关闭弹窗，修改量极小。

核心修改点 #

• 给信息图标添加唯一ID，方便JavaScript定位元素
• 新增鼠标移出事件监听，触发时调用Bootstrap原生方法关闭弹窗

完整可运行代码 #

library(shiny)
library(shinyBS)

ui <- fluidPage(
  titlePanel("Old Faithful Geyser Data"),
  # 自定义JS实现鼠标移出关闭弹窗
  tags$script(HTML("
    $(document).on('mouseleave', '#info-icon', function() {
      $(this).popover('hide');
    });
  ")),
  sidebarLayout(
    sidebarPanel(
      sliderInput("bins",
                  "Number of bins:",
                  min = 1,
                  max = 50,
                  value = 30)
    ),
    
    mainPanel(
      htmlOutput("pop")
    )
  )
)

server <- function(input, output, session) {
  output$pop <- renderUI({
    h4(style="margin-top:10px;display:initial;","topic",
       popify(
         el = icon(id = "info-icon", name = "info-circle", lib = "font-awesome"), 
         title = "",
         content = "aims",
         placement="right",
         trigger = "click",
         options = list(container = "body")
       )
    )
  })
}

shinyApp(ui = ui, server = server)

实现逻辑说明 #

shinyBS的popify本质是对Bootstrap Popover组件的封装，我们直接调用Bootstrap提供的popover('hide')方法即可手动关闭弹窗。通过监听图标的鼠标移出事件触发该方法，即可在不改动原有点击显示逻辑的前提下，实现鼠标移开自动关闭弹窗的效果。

内容的提问来源于stack exchange，提问作者user11740857