CSS is not applied to Custom Tooltips's arrow

Question

Component

<ReactTooltip className={styles.customTheme} id={id} place={placement} effect="solid"> 
    {children}
</ReactTooltip>

SCSS

.customTheme {
  color: #ff6e00 !important;
  background-color: orange !important;

  &.place-top {
    &::after {
      border-top: 6px solid orange !important;
    }
  }
}

Result

Issue

The arrow color is not changed as expected.

@AndyHoffman Please find a working example here https://stackblitz.com/edit/react-wcn9s6 — Kuldeep Bhimte, Mar 20 '19 at 06:49
@JoshPittman yes we do have `place-bottom`, but I have to use `place-top` — Kuldeep Bhimte, Mar 20 '19 at 06:50
The example doesn't work, nothing is orange, scss is not being processed. — Josh Pittman, Mar 20 '19 at 07:06
You are applying the colour to `border-top` when you target the triangle, what happens if you just try `border`. Will debug myself once you provide a working example. — Josh Pittman, Mar 20 '19 at 07:07
This is the same link, the example in this link does not work, if you hover over the text nothing in the tool tip is orange, not even the main bit. — Josh Pittman, Mar 20 '19 at 07:13
I have just found out, that it works perfectly in the working link. The issue is with my app. We are using CSS modules and when the class is applied by it the arrow class is doesn't have the same effect. — Kuldeep Bhimte, Mar 20 '19 at 07:32
But, the issue is not solved yet. Still facing the issue, in my app. — Kuldeep Bhimte, Mar 20 '19 at 08:30

score 0 · Answer 1 · answered Mar 20 '19 at 06:24

0

you can also use "title" in html tag like Name:"<input type="text" title="enter name" />

answered Mar 20 '19 at 06:24

Sourabh Shrivastava

1
1

That's a solution to a different problem. – Josh Pittman Mar 20 '19 at 07:03

score 0 · Answer 2 · answered Apr 12 '21 at 17:54

You're close. Your SCSS just needs the ::before pseudo-selector.

.customTheme {
  background-color: #ff6e00 !important;
  border: 1px solid;
  &.place-top {
    &::before, &::after {
      border-top: 8px solid #ff6e00!important;
    }
  }

Note that you should just be able to use the backgroundColor and/or arrowColor prop on the component, but they're not working: https://github.com/wwayne/react-tooltip/issues/594

CSS is not applied to Custom Tooltips's arrow

Component

SCSS

Result

Issue

2 Answers2