R Shiny - Popup window when hovering over icon

Question

I would like to simply add a hovering window over an icon after a simple line of text. I have found the shinyBS package, which seems to make this possible but it is linked to shiny outputs. Having something like the code below in the "ui" of the shiny app makes the buttons work but they are linked to the radioButtons in this case.

CVI <- c("Hello1", "Hello2", "Hello3")
CNI <- c("Peter1", "Peter2", "Peter3")
    
radioButtons(inputId = "Attribute",  label="Attribute", choiceValues = CVI,
               

             choiceNames = list(
                                tagList(
                                        tags$span(CNI[1]), #DoS
                                        tags$span(icon("info-circle"), id = "1_info", style = "color: gray;")
                                             ), 
                                tagList(
                                        tags$span(CNI[2]), #DoO
                                        tags$span(icon("info-circle"), id = "2_info", style = "color: gray;")
                                                         ), 
                                tagList(
                                        tags$span(CNI[3]), #Ratio
                                        tags$span(icon("info-circle"), id = "3_info", style = "color: gray;")
                                                         ))
                                      ),# radiobuttons end
                        
  Popover buttons
   bsPopover(id="1_info", title=NULL, content="Test1", trigger="hover", placement="right", options=list(container="body")),
   bsPopover(id="2_info", title=NULL, content="Test2", trigger="hover", placement="right", options=list(container="body")),
   bsPopover(id="3_info", title=NULL, content="Test3", trigger="hover", placement="right", options=list(container="body"))

How can I achieve something similar but without the radioButtons, simply like the word "Example" and then an icon where I hover and get a popup with some information (see picture).

I would create it somewhat like this:

Example_Text <- "Example_text" # This is what comes in the popup
"Example", span(icon("info-circle"), id = "Example_Popup", style = "color: gray;")

Answer 1

This can be done with div(title=, style=, ...) .

shinyApp(
  server = function(input,output,session){},
  ui = fluidPage(
    span(
      "Example",
      div(style = "display:inline-block;",
          title = "A tooltip",
          icon("info-circle")))
  )
)

Pause your mouse over the icon and you'll see A tooltip . It isn't styled like the directional callout you have in your page, perhaps it's sufficient.

Answer 2

The native HTML tooltips are not customizable. Bootstrap tooltips are.

library(shiny)
library(bslib)

css <- '
.tooltip {
  pointer-events: none;
}
.tooltip > .tooltip-inner {
  pointer-events: none;
  background-color: #73AD21;
  color: #FFFFFF;
  border: 1px solid green;
  padding: 10px;
  font-size: 25px;
  font-style: italic;
  text-align: justify;
  margin-left: 0;
  max-width: 1000px;
}
.tooltip > .arrow::before {
  border-right-color: #73AD21;
}
'

js <- "
$(function () {
  $('[data-toggle=tooltip]').tooltip()
})
"

shinyApp(
  server = function(input,output,session){},
  ui = fluidPage(
    theme = bs_theme(version = 4),
    tags$head(
      tags$style(HTML(css)),
      tags$script(HTML(js))
    ),
    br(),
    span(
      "Example",
      span(
        `data-toggle` = "tooltip", `data-placement` = "right",
        title = "A tooltip",
        icon("info-circle")
      )
    )
  )
)