Skip to content

Instantly share code, notes, and snippets.

@teofiln
Created April 1, 2023 21:48
Example Shiny application with Bootstrap 5 popovers
/* Popover title conflict */
h3, .h3 {
margin-top: 0 !important;
}
$( document ).ready(function() {
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
});
titleWithPopover <- function(title, popover_title, popover_body) {
htmltools::span(
class = "d-flex justify-content-between align-items-center",
title,
shiny::icon(
name = "circle-info",
style = "cursor: pointer;",
`data-bs-toggle` = "popover",
`data-bs-trigger` = "hover",
title = popover_title,
`data-bs-content` = popover_body
)
)
}
ui <- bslib::page_fluid(
htmltools::includeScript("popovers.js"),
htmltools::includeCSS("popovers.css"),
title = "Test",
theme = bslib::bs_theme(
version = 5,
bg = "#fafafa",
fg = "#264454",
primary = "#628096"
),
htmltools::div("Welcome", title = "This is a welcome message"),
htmltools::tags$br(),
htmltools::div(
class = "row",
htmltools::div(
class = "col-3",
titleWithPopover(
title = "Select a value",
popover_title = "Popover title",
popover_body = "Popover body"
),
shiny::selectInput(
inputId = "someValue",
choices = 1:3,
label = NULL,
width = "100%"
),
titleWithPopover(
title = shiny::textInput(
inputId = "textInput",
label = NULL,
width = "60%",
placeholder = "Enter some text"
),
popover_title = "Popover title",
popover_body = "Popover body"
)
),
bslib::navs_pill_list(
well = TRUE,
bslib::nav(title = titleWithPopover("Tab One",
popover_title = "Popover title",
popover_body = "Popover body"
), "Text One"),
bslib::nav(title = titleWithPopover("Tab Two",
popover_title = "Popover title",
popover_body = "Popover body"
), "Text Two"),
bslib::nav(title = titleWithPopover("Tab Three",
popover_title = "Popover title",
popover_body = "Popover body"
), "Text Three")
)
)
)
server <- function(input, output) {}
shiny::shinyApp(ui = ui, server = server)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment