Embedding/Fixing Placement of Bootstrap 4.0 Tooltip in Shiny

Question

I have tooltips working in my shiny app using just pure HTML. But, the placement of the tooltip isn't hovering over the button as I am trying to. My code to reproduce this is below. I thought placing the button in a div would cause for the tooltip to hover over the button, but clearly that's not right.

Any suggestions on how to get that tooltip to hover directly over the button when I mouseover the button?

Code below and not that the .js file lives in the www subdirectory of the app.

Edit

I found that if I use the following it hovers as expected over the button. Not sure if this is the best approach, but it seems to work.

tags$a(href = "#", `data-toggle`="tooltip", `data-placement`="top", title="Is this over my button", actionButton('button', 'Button'))

ui.R

library(shiny)
library(bslib)
library(shinyWidgets)
ui <- fluidPage(
    tags$head(
        tags$script(src = "myscript.js")
    ),
    navbarPage(
        theme = bs_theme(bootswatch = "litera"),
        title = 'Methods',
        tabPanel('One'),
        
    ),  
    sidebarLayout(
        sidebarPanel(
            fileInput('input0', 'Browse'),
            uiOutput("input1"),
        ),
        mainPanel(
            h1('Hello World!'),
            
            tags$div(class = "header", `data-toggle`="tooltip", `data-placement`="top", title="Tooltip on top", 
              actionButton('button', 'Button')
            )           
                    
        ),
    )
)

server.R

server <- function(input, output) {
output$input1 <- renderUI({
    selectInput("input1", "Choose:", letters[1:5])
})
}

myscript.js

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

Answer 1

Look at this bootstrap documentation. You have to initially link to popper.min.js, and try something like:

tags$head(
  tagList(
    tags$script(src = "myscript.js"),
    tags$script(src = "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js")))