You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何修改shinydashboardPlus中boxSidebar悬停tooltip'More'文本

问题背景

开发非英文版本Shiny应用时,调用shinydashboardPlus包的boxSidebar组件,鼠标悬停在侧边栏触发图标上会默认显示英文"More"提示,需要替换该提示文本。
此前尝试用shinyjs::hide()移除提示时,发现提示对应的元素ID会在每次悬停时动态变化,无法通过固定ID定位,该方案无法落地。

默认悬停提示效果

最小可复现示例代码:

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

shinyApp(
    ui = dashboardPage(
        header = dashboardHeader(),
        body = dashboardBody(
            box(
                title = "Hover icon", 
                sidebar = boxSidebar(
                    id = "mycardsidebar",
                    p("Sidebar Content")
                )
            )
        ),
        sidebar = dashboardSidebar()
    ),
    server = function(input, output, session) {
    }
)
解决方案

之前定位动态提示元素的思路走了弯路:这个悬停提示是Bootstrap动态生成的Tooltip组件,每次触发悬停才会临时插入DOM,ID随机分配,本身就不适合作为定位目标。
提示的实际文本存储在侧边栏触发按钮的data-original-title固定属性上,触发按钮的CSS选择器.btn-box-tool[data-widget="sidebar"]是全局固定的,直接修改这个属性值就能替换提示文本,不需要依赖额外扩展包。

修改后的完整可运行代码如下,示例将默认提示替换为中文"更多操作",可自行替换为任意目标语言文本:

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

shinyApp(
    ui = dashboardPage(
        header = dashboardHeader(),
        body = dashboardBody(
            # 插入JS修改默认提示文本
            tags$script(HTML(
                '$(document).ready(function(){
                    // 定位所有boxSidebar触发按钮,修改提示属性
                    $(".btn-box-tool[data-widget=\"sidebar\"]").attr("data-original-title", "更多操作");
                })'
            )),
            box(
                title = "Hover icon", 
                sidebar = boxSidebar(
                    id = "mycardsidebar",
                    p("Sidebar Content")
                )
            )
        ),
        sidebar = dashboardSidebar()
    ),
    server = function(input, output, session) {
    }
)

补充说明:

  • 如果需要完全移除悬停提示,只需要把data-original-title的属性值设为空字符串""即可
  • 如果页面存在多个带侧边栏的box、需要给不同box设置不同提示,可以给对应box加自定义class,在jQuery选择器中限定范围单独修改属性即可
  • 该方案对动态渲染的UI同样生效,只要在UI初始化时加载这段JS,后续动态插入的boxSidebar触发按钮也会被正确修改属性

内容的提问来源于stack exchange,提问作者Chili

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.27 12:01:15