Position tippy tooltip next to button in R Shiny

Question

I would like to add a tooltip to a button using tippy 1.0.0.

The tooltip always appears in the middle of the screen and not close to the text as expected.

I tried to specifiy the position arguments, but had no success. I was able to position the tooltips correctly in tippy version 0.1.0.

How can I position the tooltip close to the text?

library(shiny)
library(tippy)

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

Result:

Answer 1

This is because your tags are displayed as block in CSS. Even though the element only shows a small portion of the total width, but it is still occupying the full width of the parent node by default. This is how CSS display works. tippy works on the whole occupied width, not what you see with your eyes. Use your p tag for example to inspect:

See the blue shade that takes the entire row? tippy is displayed at the center of the shade.

We can change the display to another to force the tooltip to be positioned around p, like inline-block:

library(shiny)
library(tippy)

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

When you inspect, the size is what we want.

However (there is always a however), this may mess up your UI display. e.g., we want a button in the second line, but here is what you will see

library(shiny)
library(tippy)

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

To fix, you can add a wrapper outside your tooltip tag with block display,

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

Or I'd prefer an easier way:

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

Please read more about CSS display: https://www.w3schools.com/cssref/pr_class_display.asp