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