如何让R Shiny中的Tooltip点击触发而非悬停触发？

要让Tooltip支持点击触发（适配移动端），只需利用Bootstrap Tooltip的data-trigger属性，还可兼顾桌面端的悬停操作。以下是几种实用方案：

方案1：纯点击触发（适配移动端） #

在span标签中添加data-trigger="click"属性，Tooltip会在点击图标时显示，再次点击隐藏：

library(shiny)
ui <- fluidPage(
  # 初始化Tooltip确保正常工作
  tags$script(HTML("
    $(document).ready(function() {
      $('[data-toggle=\"tooltip\"]').tooltip();
    });
  ")),
  
  span(
    `data-toggle` = "tooltip", 
    `data-placement` = "auto",
    `data-trigger` = "click", # 设置点击触发
    title = "I'm a tooltip!",
    icon("info-circle", style="font-size: 150%;")
  )
)

server <- function(input, output) {}
shinyApp(ui = ui, server = server)

方案2：同时支持悬停和点击（兼顾桌面+移动端） #

如果需要在桌面端保留悬停触发、移动端用点击触发，可设置data-trigger="hover click"：

library(shiny)
ui <- fluidPage(
  tags$script(HTML("
    $(document).ready(function() {
      $('[data-toggle=\"tooltip\"]').tooltip();
    });
  ")),
  
  span(
    `data-toggle` = "tooltip", 
    `data-placement` = "auto",
    `data-trigger` = "hover click", # 同时支持两种触发方式
    title = "I'm a tooltip!",
    icon("info-circle", style="font-size: 150%;")
  )
)

server <- function(input, output) {}
shinyApp(ui = ui, server = server)

额外优化：点击页面其他区域关闭Tooltip #

若希望点击图标外的区域也能关闭Tooltip，可添加如下JavaScript逻辑：

library(shiny)
ui <- fluidPage(
  tags$script(HTML("
    $(document).ready(function() {
      $('[data-toggle=\"tooltip\"]').tooltip({
        trigger: 'click'
      });
      
      // 点击非图标区域关闭Tooltip
      $(document).on('click', function(e) {
        if (!$(e.target).closest('[data-toggle=\"tooltip\"]').length) {
          $('[data-toggle=\"tooltip\"]').tooltip('hide');
        }
      });
    });
  ")),
  
  span(
    `data-toggle` = "tooltip", 
    `data-placement` = "auto",
    title = "I'm a tooltip!",
    icon("info-circle", style="font-size: 150%;")
  )
)

server <- function(input, output) {}
shinyApp(ui = ui, server = server)

说明 #

• Bootstrap Tooltip的data-trigger属性支持的值包括：hover（默认）、click、focus、manual，也可组合多个值（用空格分隔）。
• 手动添加初始化代码是为了确保Tooltip在动态生成元素等复杂场景下仍能正常工作。

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