R Shiny中如何将tippy 1.0.0的tooltip定位在目标元素旁

根因说明 #

• tippy 1.0.0版本存在不兼容旧版的API变更：原0.1.0版本用于控制位置的position参数已废弃，替换为placement参数，直接沿用旧版参数设置不会生效。
• 1.0.0版本默认将tooltip组件挂载到全局body节点，定位参考基准为整个浏览器视口，因此会出现tooltip固定显示在屏幕中央的问题。

解决方案 #

方案1（推荐：1.0.0版本标准用法） #

使用tippy_this()接口绑定带唯一ID的目标元素，是新版本官方更推荐的实现方式，代码示例如下：

library(shiny)
library(tippy)

shinyApp(
  ui = fluidPage(
    # 给目标元素设置唯一ID
    p("Test", id = "test_element"),
    tippy_this(
      target = "test_element",
      content = "Tooltip",
      placement = "right" # 可按需替换为top、bottom、left、top-start等位置值
    )
  ),
  server = function(input, output) {}
)

方案2（保留原包裹元素写法） #

如果不想修改原有代码结构，可手动指定appendTo = "parent"参数，让tooltip和目标元素挂载到同一个父容器，即可保证定位计算的参考基准一致，代码示例如下：

library(shiny)
library(tippy)

shinyApp(
  ui = fluidPage(
      tippy(
        element = p("Test"),
        content = "Tooltip",
        placement = "right",
        appendTo = "parent"
      )
  ),
  server = function(input, output) {}
)

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