Unable to style custom class of react-tooltip

Question

I am using react-tooltip with an information icon. I have added a custom class to my tooltip element. But I am unable to style it in CSS, even though I am using !important. I went through How to align the text to the left. in react-tooltip? but that didn't help me. The border-radius, padding, font-size etc. doesn't change. Here's my code:-

.tooltip {
    border-radius: 8px !important;
    padding: 8px !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    font-size: 16px !important;
    font-weight: normal !important;
    filter: drop-shadow(rgba(0, 0, 0, 0.3) 0 2px 10px) !important;
  }

<span className='iconInfo' data-tip data-for='myTip'>&#9432;</span> <ReactTooltip id='myTip' className='tooltip' place='right' effect='solid' type='light' border='true'>My Tooltip</ReactTooltip>

Edit 1:

So, I have changed the <text> to <span>. And, I don't have any class for the <span> now. I have a class name for the tooltip. <span data-tip data-for='invoiceTip'>ⓘ</span> <ReactTooltip id='invoiceTip' className='tooltip' place='right' effect='solid' type='light' border={true}>{t('invoice_tooltip')}</ReactTooltip>. But, I still can't get it to work. Here's the edited CSS:-

.tooltip .place-right {
    border-radius: 8px !important;
    padding: 8px !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px !important;
    font-weight: normal;
    /* filter: drop-shadow(rgba(0, 0, 0, 0.3) 0 2px 10px); */
  }

I have tried .tooltip, .tooltip .place-right, .tooltip.__react_component_tooltip, with and without !important. None of them have worked.

Edit 2:

I got where I went wrong. I was using a bunch of info icons and each of them had their own ReactTooltip element, while in the CSS I was styling only one common element. The best way is to keep the ReactTooltip element at the end, maybe in the same hierarchy as all the elements using it. Thanks to https://egghead.io/lessons/react-easily-add-tooltips-to-a-react-app-with-react-tooltip-library for pointing me in the right direction.

I just tried to add a custom class, and applied a style rule without `!important` and it worked. — flppv, Jul 06 '22 at 07:30
@Sh4dy please have a read of this https://stackoverflow.com/help/minimal-reproducible-example — ksav, Jul 07 '22 at 08:27

score 0 · Answer 1 · answered Jul 06 '22 at 07:35

0

You should consider the priority of more complex style rules. Probably the text element you want to change has an own class, and you need to use it in your rule.

I forked an example, added custom class .test and my rules worked.

In my case, to change the color of multi-line tooltip text I had to use such rule:

.test .multi-line { color: ...; }

See the fork

answered Jul 06 '22 at 07:35

flppv

4,111
5
35
54

I went through your fork. It's not working for me. I have edited my question to include what you suggested. Could you take a look? – Sh4dy Jul 06 '22 at 10:03
I finally figured it out. Will edit my question. – Sh4dy Jul 07 '22 at 06:58

Unable to style custom class of react-tooltip

1 Answers1