如何修改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
相关产品推荐
相关产品推荐

