Popup frameless window in R Shiny

Question

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:

1. the default is to block pop-ups
2. the window opens a completely separate web page

How is it possible in R Shiny to click an "ⓘ" icon and have a small, frameless pane appear that:

• floats on top of the main window but is not a modal in that the main window is still usable.
• is moveable and closeable
• works with Bootstrap v5
• not blocked by pop-up blockers that block web pages from opening

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)

Answer 1

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)