Created
April 1, 2023 21:48
Example Shiny application with Bootstrap 5 popovers
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Popover title conflict */ | |
h3, .h3 { | |
margin-top: 0 !important; | |
} | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$( document ).ready(function() { | |
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]')) | |
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) { | |
return new bootstrap.Popover(popoverTriggerEl) | |
}) | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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