How to customize bs4dash tooltip in shiny app?

Question

I want to customize the tooltip in the following shiny app:

library(shiny)
library(bs4Dash)

ui <- fluidPage(
  tooltip(
    actionButton("goButton", "Hier klicken!"),
    title = "This is a ridiculous blablabla example text
            even more bla bla bla",
    placement = "right"
    
  )
)

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

shinyApp(ui, server)

Ideally the text is shown as flush left, the background color is another one and the tooltip-box is larger. Within the help of the bs4Dash package i found only the follwing link https://getbootstrap.com/docs/4.0/components/tooltips/ but i dont know where to place it.

score 1 · Accepted Answer · answered Jan 04 '23 at 19:59

See here for different ways to modify css in your ShinyApp. This example makes inline css with many tooltip css specifications as per this answer on another question.

library(shiny)
library(bs4Dash)

ui <- fluidPage(
  
  tags$style(HTML("
      .tooltip {
    display: flex;
    justify-content: flex-start;
    position: absolute;
    z-index: 9999;
    background: #ddff9d;
    color: #333333;
    width: 320px;
    
    -webkit-box-shadow: 5px 5px 5px 5px white;
    box-shadow: 2px 2px 2px 2px white;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    opacity: 1 !important;

    padding: 10px;
    text-align: left;
}

.tooltip-inner {
    background-color: #00acd6 !important;
    /*!important is not necessary if you place custom.css at the end of your css calls. For the purpose of this demo, it seems to be required in SO snippet*/
    color: #fff;
}

.tooltip.top .tooltip-arrow {
    border-top-color: #00acd6;
}

.tooltip.right .tooltip-arrow {
    border-right-color: #00acd6;
}

.tooltip.bottom .tooltip-arrow {
    border-bottom-color: #00acd6;
}

.tooltip.left .tooltip-arrow {
    border-left-color: #00acd6;
}")),
  
  tooltip(
    actionButton("goButton", "Hier klicken!"),
    title = "This is a ridiculous blablabla example text
            even more bla bla bla",
    placement = "right"
    
  )
)

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

shinyApp(ui, server)

How to customize bs4dash tooltip in shiny app?

1 Answers1