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;")

An non-elegant way would be to create a tooltip with a div. tags$div(title=Example_Text ,span(icon("info-circle"), id = "Example_Popup", style = "color: gray;")) — Levon Ipdjian, Aug 10 '22 at 12:48

score 6 · Accepted Answer · answered Aug 11 '22 at 18:22

6

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")
      )
    )
  )
)

answered Aug 11 '22 at 18:22

Stéphane Laurent

75,186
15
119
225

this is great, thank you so much! Just a few more things: for some reason the arrow always stays black for me, with what commands can I adjust the colors to style the whole window like in my example? The text I use in the box is a bit longer and thus it extends quite far horizontally. This becomes an issue because the tooltip box appears to be restricted in size by the column I use in my shiny app. Is there any way to make the tooltip ignore such restrictions? – Ferdi Aug 15 '22 at 15:00
Hi Stéphane, great resource, thanks. Any ideas on how to apply different styles to different tooltip boxes around the app based on this approach? Here's a question I just posted about that in case you have an input: https://stackoverflow.com/q/75515925/12372421. – djbetancourt Feb 21 '23 at 03:40
Stéphane, do you think it will be possible to have an HTML code constituting the tootltip text? I need something like: `"Click the pin icon [i] and then..."`, where `[i]` is an image imported through the following HTML: `` – djbetancourt Feb 23 '23 at 00:36

score 5 · Answer 2 · answered Aug 10 '22 at 12:54

5

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.

answered Aug 10 '22 at 12:54

r2evans

141,215
6
77
149

It works but it isn't ideal. Is there any way to modify the popup window? Like changing font color, window width, time until it shows up? – Ferdi Aug 10 '22 at 13:48
You can add whatever CSS you need to `div(style="...", ...)`. – r2evans Aug 10 '22 at 14:07

R Shiny - Popup window when hovering over icon

2 Answers2

Linked