Search code examples
jquerycssrshinytooltip

Why is my CSS being ignored in my R Shiny App?

Consider the tooltip I have installed on the info icon in this reprex:

library(shiny)
ui <- fluidPage(
  span(
    `data-toggle` = "tooltip",
    `data-placement` = "auto",
    `data-trigger` = "click hover",
    title = "I'm a tooltip!",
    icon("info-circle", style="font-size: 150%;")),

  tags$script(
    HTML(
      "$(function () { 
        $('[data-toggle=tooltip]').tooltip();   
      });"
    )
  ),
  
  tags$style(
    ".tooltip.inner{background-color:red !important;}"
  )
)

server <- function(input, output) {}
shinyApp(ui = ui, server = server)

The default background color for a tooltip's inner region is black. However, I have put in CSS that should be overriding that default value to red, but it isn't--it's still black. What gives? I know, both from inspection and from Googling, that .tooltip.inner is the proper selector. It feels like my CSS is just being...ignored! I've tried using a separate CSS file instead of doing this via the style tag and it makes no difference. This is just the latest example of my App seemingly ignoring my CSS, which makes me think that I am missing something conceptual...

Solution

  • Edit: Per @piskunovim's comment, it seems like I misunderstood your inner request. I've updated the code snippet to allow you to update the tooltip button background as well as the hover background & arrow color.

    library(shiny)
ui <- fluidPage(
  span(
    `data-toggle` = "tooltip",
    `data-placement` = "auto",
    `data-trigger` = "click hover",
    title = "I'm a tooltip!",
    icon("info-circle", style="font-size: 150%; color: red;")),
  
  tags$script(
    HTML(
      "$(function () { 
        $('[data-toggle=tooltip]').tooltip();   
      });"
    )
  ),
  
  tags$style(
    ".tooltip-inner {background-color:red !important;}",
    ".tooltip-arrow {border-bottom-color: red !important;}"
  )
)

server <- function(input, output) {}
shinyApp(ui = ui, server = server)

    tooltip-coloring