How to override htmlwidgets .css code with your own .css file without using !important

shiny
1

I would like to override the default transition for tooltips from nvd3 which comes from rCharts. This should be similar to overriding any .css in any typical htmlwidget. I am able to accomplish this by writing my own .css (jason.css) file and then placing it at the top of my ui.R file:

  tags$head(
    tags$link(rel = "stylesheet", type = "text/css", href = "jason.css")
  ),

Contents of my jason.css file:

.nvtooltip {
    transition: opacity 0ms linear !important;
    -moz-transition: opacity 0ms linear !important;
    -webkit-transition: opacity 0ms linear !important;

    transition-delay: 0ms !important;
    -moz-transition-delay: 0ms !important;
    -webkit-transition-delay: 0ms !important;
}

However, in order to get the adjustments to "take" I have to add !important -- this feels like a bad practice and I feel like there could be better way?

2

rCharts is no longer actively developed and has been superseded by htmlwidgets. However, there is no htmlwidget binding for nvd3, so I would say your solution (although it "feels like a bad practice") is the best method of accomplishing your task.

3

If you want to avoid !important, you'll need to modify your CSS selector (.nvtooltip) to be more specific than whatever rule is being applied by nvd3. See this article:

1 Like