R Shiny中实现bslib::tooltip条件显示并消除残留元素

针对你遇到的tooltip在非目标标签页残留指针和空容器的问题，给你两个实用的解决思路：

方法一：动态生成带/不带tooltip的输入（彻底消除多余DOM） #

既然tooltip是包裹输入组件的，那可以通过server端动态渲染，根据当前标签页状态决定是否添加tooltip。这样非目标标签页下根本不会生成tooltip的DOM结构，自然没残留。

示例代码：

library(shiny)
library(bslib)

ui <- page_sidebar(
  tabsetPanel(
    id = "tabs",
    tabPanel("目标标签页", uiOutput("my_input")),
    tabPanel("其他标签页", uiOutput("my_input"))
  )
)

server <- function(input, output, session) {
  output$my_input <- renderUI({
    # 判断当前是否在目标标签页
    if (input$tabs == "目标标签页") {
      # 带tooltip的输入
      selectInput("my_select", "选择项", choices = c("A", "B", "C")) %>%
        tooltip(title = "这是仅在目标标签显示的提示")
    } else {
      # 普通输入，不带tooltip
      selectInput("my_select", "选择项", choices = c("A", "B", "C"))
    }
  })
}

shinyApp(ui, server)

这个方法逻辑清晰，完全没有多余的DOM元素，适合新开发的组件。

方法二：用CSS条件隐藏tooltip的残留元素 #

如果不想改动现有渲染逻辑，可以通过CSS根据标签页状态，隐藏tooltip的箭头和容器。bslib的tab切换时，会给<body>标签添加data-bs-active-tab属性，值为当前激活标签的id，我们可以利用这个来写条件样式。

示例代码：

library(shiny)
library(bslib)

ui <- page_sidebar(
  tags$style(HTML("
    /* 当不在目标标签页时，隐藏tooltip的箭头和容器 */
    body[data-bs-active-tab!='tab1'] .conditional-tooltip .bs-tooltip,
    body[data-bs-active-tab!='tab1'] .conditional-tooltip::after {
      display: none !important;
    }
  ")),
  tabsetPanel(
    id = "tabs",
    tabPanel("目标标签页", value = "tab1",
             selectInput("my_select", "选择项", choices = c("A", "B", "C")) %>%
               tooltip(title = "这是仅在目标标签显示的提示", class = "conditional-tooltip")
    ),
    tabPanel("其他标签页", value = "tab2",
             selectInput("my_select", "选择项", choices = c("A", "B", "C")) %>%
               tooltip(title = "这是仅在目标标签显示的提示", class = "conditional-tooltip")
    )
  )
)

server <- function(input, output, session) {}

shinyApp(ui, server)

这个方法不用改server端逻辑，只需要加一段CSS和给tooltip加个类，适合已有代码的快速修改。注意要把tab1改成你目标标签页的实际value值。

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