在 R Shiny 中的按钮旁边放置提示工具提示

Question

我想使用 tippy 1.0.0 向按钮添加工具提示。

工具提示总是出现在屏幕中间，并没有像预期的那样靠近文本。

我试图指定位置参数，但没有成功。我能够在 tippy 版本 0.1.0 中正确定位工具提示。

如何将工具提示放在靠近文本的位置？

library(shiny)
library(tippy)

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

结果：

Answer 1

这是因为您的标签在 CSS 中显示为 block。尽管该元素只显示了总宽度的一小部分，但它仍然默认占据了父节点的全部宽度。这就是 CSS 显示的工作原理。 tippy 适用于整个占用的宽度，而不是您用眼睛看到的宽度。例如，使用您的 p 标签来检查：

看到占据整行的蓝色阴影了吗？ tippy 显示在阴影的中央。

我们可以将 display 更改为另一个以强制将工具提示定位在 p 周围，例如 inline-block:

library(shiny)
library(tippy)

shinyApp(
    ui = fluidPage(
        tippy(
            element = p(
                "Test", 
                style = "display: inline-block"
            ),
            content = "Tooltip"
        )
    ),
    server = function(input, output) {}
)

您验货的时候，尺寸就是我们想要的。

但是（总有一个但是），这可能会弄乱您的 UI 显示。例如，我们希望在第二行有一个按钮，但这是您将看到的内容

library(shiny)
library(tippy)

shinyApp(
    ui = fluidPage(
        tippy(
            element = p(
                "Test", 
                style = "display: inline-block"
            ),
            content = "Tooltip"
        ),
        tags$button("Test2")
    ),
    server = function(input, output) {}
)

要解决这个问题，您可以在工具提示标签外添加一个包装器 block 显示，

shinyApp(
    ui = fluidPage(
        div(style = "display: block", 
            tippy(
                element = p(
                    "Test", 
                    style = "display: inline-block"
                ),
                content = "Tooltip"
            )
        ),
        tags$button("Test2")
    ),
    server = function(input, output) {}
)

或者我更喜欢更简单的方法：

shinyApp(
    ui = fluidPage(
        p(tippy(element = tags$span("Test" ), content = "Tooltip")),
        tags$button("Test2")
    ),
    server = function(input, output) {}
)

请详细阅读 CSS 显示：https://www.w3schools.com/cssref/pr_class_display.asp

在 R Shiny 中的按钮旁边放置提示工具提示

Position tippy tooltip next to button in R Shiny

r

shiny

tippyjs