如何修改tags$i生成的悬停文本（title）样式？

原生HTML的title属性样式由浏览器默认控制，无法直接通过CSS修改，因此我们可以通过JavaScript+CSS模拟自定义tooltip来替代原生悬停文本，同时保留使用tags$i的要求。

实现步骤 #

• 定义自定义tooltip的CSS样式，控制背景、字体、间距等外观
• 编写JavaScript监听鼠标事件，动态生成/移除自定义tooltip，同时屏蔽原生title的显示
• 将样式和脚本嵌入Shiny UI中

完整示例代码 #

library(shiny)

shinyApp(
  ui = fluidPage(
    # 自定义tooltip的CSS样式
    tags$style(HTML("
      .custom-tooltip {
        position: absolute;
        background-color: #333;
        color: #fff;
        font-family: Arial, sans-serif;
        font-size: 14px;
        padding: 8px 12px;
        border-radius: 4px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.3);
        z-index: 9999;
        pointer-events: none;
        display: none;
      }
    ")),
    
    # 处理tooltip的JavaScript代码
    tags$script(HTML("
      document.addEventListener('DOMContentLoaded', function() {
        // 选中所有带有title的info-sign图标
        const infoIcons = document.querySelectorAll('.glyphicon-info-sign[title]');
        
        infoIcons.forEach(icon => {
          // 保存原生title文本，清空后避免原生提示显示
          const tooltipText = icon.getAttribute('title');
          icon.removeAttribute('title');
          
          // 创建自定义tooltip元素
          const tooltip = document.createElement('div');
          tooltip.className = 'custom-tooltip';
          tooltip.textContent = tooltipText;
          document.body.appendChild(tooltip);
          
          // 鼠标进入时显示tooltip
          icon.addEventListener('mouseenter', function(e) {
            tooltip.style.display = 'block';
            // 设置tooltip位置
            tooltip.style.left = (e.pageX + 10) + 'px';
            tooltip.style.top = (e.pageY + 10) + 'px';
          });
          
          // 鼠标移动时更新tooltip位置
          icon.addEventListener('mousemove', function(e) {
            tooltip.style.left = (e.pageX + 10) + 'px';
            tooltip.style.top = (e.pageY + 10) + 'px';
          });
          
          // 鼠标离开时隐藏tooltip
          icon.addEventListener('mouseleave', function() {
            tooltip.style.display = 'none';
          });
        });
      });
    ")),
    
    selectInput("Input", 
                label = tags$span(
                  "Input", 
                  tags$i(
                    class = "glyphicon glyphicon-info-sign",
                    style = "color: black",
                    title = "这是自定义样式的悬停文本"
                  ),
                ),
                choices = c("a","b")),
  ),
  
  server = function(input, output) {}
)

样式自定义说明 #

可以直接修改.custom-tooltip里的CSS属性调整外观：

• background-color：悬停框背景色
• color：文本颜色
• font-family/font-size：字体类型和字号
• padding：内边距大小
• border-radius：圆角弧度
• box-shadow：阴影效果

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