I want the user to be able to pop up an info pane that gives them info to help fill out form fields.
I was able to pop up a small web browser with the required, formatted info. This works OK on a desktop but on mobile:
How is it possible in R Shiny to click an "ⓘ" icon and have a small, frameless pane appear that:
R Script for small pop-up browser window
library("shiny")
library("shinyjs")
library("bslib")
provinces <- c("British Columbia", "Alberta", "Saskatchewan", "Manitoba", "Ontario", "Quebec",
"New Brunswick", "Nova Scotia", "PEI", "Newfoundland and Labrador")
select_input_width <- "220px"
ui <- bootstrapPage(
useShinyjs(),
theme = bs_theme(version = 5,
"font-scale" = 1.0),
div(class = "container-fluid",
selectInput(inputId = "province",
label = HTML(paste0("Province ", actionLink("province_info_lnk", "ⓘ"))),
choices = provinces,
selected = "Ontario",
selectize = FALSE,
width = select_input_width)
)
)
server <- function(input, output, session) {
observeEvent(input$province_info_lnk, {
# https://javascript.info/popup-windows
runjs("let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,width=300,height=335,left=100,top=100`;
open('https://google.com', 'test', params);")
})
}
shinyApp(ui, server)
I don't have a mobile to try, but the link given in your code says that the popups are not blocked if they are ran from the onclick attribute, so I would try:
library("shiny")
library("bslib")
provinces <- c("British Columbia", "Alberta", "Saskatchewan", "Manitoba", "Ontario", "Quebec",
"New Brunswick", "Nova Scotia", "PEI", "Newfoundland and Labrador")
select_input_width <- "220px"
ui <- bootstrapPage(
theme = bs_theme(version = 5,
"font-scale" = 1.0),
div(class = "container-fluid",
selectInput(
inputId = "province",
label = tags$span(
tags$label(
"Province ",
style = "font-weight: bold; font-size: 1.2rem;"
),
tags$a(
icon("info-circle"),
style = "cursor: pointer;",
onclick = "open('https://google.com', 'test', 'scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,width=300,height=335,left=100,top=100');"
)
),
choices = provinces,
selected = "Ontario",
selectize = FALSE,
width = select_input_width)
)
)
server <- function(input, output, session) {}
shinyApp(ui, server)