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


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$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?


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.


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: