Change color of multiple bsTooltip boxes differently in Shiny

Question

Following this question, I want to have different styles for different tooltips in my Shiny app. How can I do that?

For example, if I have three buttons, I want to have three different background colors or font color or font style for each of them.

Just repeating the code doesn't work

actionButton("button1", "Click button 1"),
bsTooltip("button1", 
          "Button 1 Tooltip", 
          placement = "bottom", trigger = "hover",
          options = NULL),
tags$style(HTML("
                 .tooltip > .tooltip-inner {
                 width: 1000px;
                 color: black;
                 background-color: yellow;
                 opacity: 1;
                 }"
))
                 

actionButton("button2", "Click button 2"),
bsTooltip("button2", 
          "Button 2 Tooltip", 
          placement = "bottom", trigger = "hover",
          options = NULL),
tags$style(HTML("
                 .tooltip > .tooltip-inner {
                 width: 600px;
                 color: white;
                 background-color: darkblue;
                 opacity: 1;
                 }"
))


actionButton("button3", "Click button 3"),
bsTooltip("button3", 
          "Button 3 Tooltip", 
          placement = "bottom", trigger = "hover",
          options = NULL),
tags$style(HTML("
                 .tooltip > .tooltip-inner {
                 width: 1000px;
                 color: white;
                 background-color: red;
                 opacity: 1;
                 }"
))

What is the solution to this?

score 1 · Accepted Answer · answered Jun 05 '21 at 18:36

Could you wrap each button in a separate div? Then you could define the css for each div, including different background colors.

library(shiny)
library(shinyBS)

ui <- fluidPage(
  tags$style(HTML(
      "#button1_div .tooltip > .tooltip-inner {
       background-color: yellow;
       width: 1000px;
       color: black;
       opacity: 1;}
      
       #button2_div .tooltip > .tooltip-inner {
       background-color: darkblue;
       width: 600px;
       color: white;
       opacity: 1;}
       
       #button3_div .tooltip > .tooltip-inner {
       background-color: red;
       width: 1000px;
       color: white;
       opacity: 1;}"
  )),
  column(4, 
    div(id = "button1_div",
        actionButton("button1", "Click button 1"),
        bsTooltip("button1", 
                  "Button 1 Tooltip", 
                  placement = "bottom", trigger = "hover",
                  options = NULL)
    ),
  ),
  column(4,
    div(id = "button2_div",
        actionButton("button2", "Click button 2"),
        bsTooltip("button2", 
                  "Button 2 Tooltip", 
                  placement = "bottom", trigger = "hover",
                  options = NULL)
    ),
  ),
  column(4, 
    div(id = "button3_div",
        actionButton("button3", "Click button 3"),
        bsTooltip("button3", 
                  "Button 3 Tooltip", 
                  placement = "bottom", trigger = "hover",
                  options = NULL)
    )
  )
)

server <- function(input, output, session) {}

shinyApp(ui, server)

Thanks for your complete answer. Just one thing. I noticed that width of the tooltip is the same in all, although width value is different. Do you have any solution for this? Thanks. — mah65, Jun 06 '21 at 00:27
You probably also need to override the maximum width property with bootstrap...in addition to setting the width, try also adding: `max-width: 1000px;` or something to that effect, and see if that helps... — Ben, Jun 06 '21 at 02:26

Change color of multiple bsTooltip boxes differently in Shiny

1 Answers1

Linked