Explore the tooltip configuration I've implemented for the info icon in the code snippet below:
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 color of a tooltip's inner area is supposed to be black. However, I have specified CSS that should override this default and set the background color to red, but it persists as black. Why is this happening? Through inspection and research, I am confident that .tooltip.inner is the correct selector. It seems like my CSS rules are not being applied. I even attempted using an external CSS file instead of inline styling without success. This situation adds to a recurring issue where my App fails to recognize my CSS modifications, indicating a potential gap in my understanding...