I have successfully implemented tooltips in my Shiny app using pure HTML. However, I am facing an issue with the placement of the tooltip not hovering directly over the button as intended. Despite placing the button within a div element, the tooltip does not align properly.
Does anyone have suggestions on how to make the tooltip hover directly over the button when it is moused over?
Below is the code snippet for reference, noting that the .js file is located in the www subdirectory of the app.
Edit
I discovered that by using the following code, the tooltip hovers over the button as expected. Although I'm unsure if this is the most optimal solution, it does seem to work effectively.
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()
})