Search code examples
cssreactjstypescripttooltip

Cannot force rc-tooltip opacity to 1


We have built our tooltips on top of rc-tooltip, but even with our custom CSS, the tooltip does not appear to have an opacity of 1. It is still translucent. See in the picture (you can see the text in the background):
bad opacity

I've tried forcing the opacity value like so:

.silo-tooltip .rc-tooltip {
  /* Material-UI's modal is 1300 */
  z-index: 1400;
  opacity: 1 !important;
}

But this is not having an effect. Is this a known issue, or am I missing a critical piece of info here?


Solution

  • This answer is taken from here and all credits belong the OP: https://github.com/ReactTooltip/react-tooltip/issues/277#issuecomment-414763398

    Add the following class:

    
    .opaque {
      opacity: 1 !important;
    }
    
    

    Then in your JSX:

    
    <ReactTooltip className={'opaque'}>
    
    

    This worked for me, hope it helps.