Style individual bsTooltip (shinyBS) elements

Question

I am trying to add some tooltips to different action buttons in my shiny app through the bsTooltip() function of the shinyBS package, and I would like to modify the width just of a specific tooltip box. To do that, I can specify the HTML tags at the beginning of my UI and modify directly the CSS, but if I use the simple element .tooltip {...} I modify the width of every tooltip in my code:

Below you can find a minimal reproducible example with two different action buttons:

library(shiny)
library(shinyBS)

library(shiny)

ui <- fluidPage(

  tags$head(tags$style(HTML(".tooltip {width: 300px;}"))),

  br(),

  actionButton(inputId = "button1",
               label = "First"),
  bsTooltip(id = "button1",
            title = "Bonjour!",
            placement = "right",
            trigger = "hover"),

  br(),
  br(),

  actionButton(inputId = "button2",
               label = "Second"),
  bsTooltip(id = "button2",
            title = "Hello!",
            placement = "right",
            trigger = "hover")

)

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

}

shinyApp(ui, server)

I've been in this situation before, for example when I had to modify the color of the placeholder of a specific textInput() widget. To do that, in my HTML() function I specified:

tags$head(tags$style(HTML("#textinput_ID::placeholder {color: #EEE1525;}")))

but this doesn't seem to work in this case.

Thanks a lot for your help!

score 5 · Accepted Answer · answered Oct 10 '19 at 12:11

You can wrap your actionButton and bsTooltip in a div with an id. Now you can select this div by it's id and only style the tooltip inside.

library(shiny)
library(shinyBS)

ui <- fluidPage(

  tags$head(tags$style(HTML("#button1_div .tooltip {width: 300px;}"))),

  br(),
  div(id='button1_div',
      actionButton(inputId = "button1",
                   label = "First"),
      bsTooltip(title = "Bonjour!",
                placement = "right",
                trigger = "hover")),

  br(),
  br(),

  actionButton(inputId = "button2",
               label = "Second"),
  bsTooltip(id = "button2",
            title = "Hello!",
            placement = "right",
            trigger = "hover")

)

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

}

shinyApp(ui, server)

Thanks for the response. I'm beginner. I wish you would at least show one example how to style the div after this. Thanks. — mah65, Jun 05 '21 at 16:20

Style individual bsTooltip (shinyBS) elements

1 Answers1

Linked