0

Anyone with experience on reactstrap package knows how can I change the color of the arrow and the opacity of the tooltip that appears? I tried several solutions but I can't find an answer. My code looks like this :

<Tooltip
          autohide={false}
          className={styles.tooltip}
          innerClassName={styles.TextWithTooltip_tooltip}
          arrowClassName={styles.arrow}
          trigger="click hover focus"
          id={id}
          role="tooltip"
          placement="bottom"
          target={tooltipRef.current}
          toggle={toggle}
          isOpen={tooltipOpen}
        >
          {tooltipContent}
        </Tooltip>

I tried:

.TextWithTooltip {
  &_tooltip {
    border-radius: 10px !important;
    opacity: 0.5 !important;
    text-align: left !important;
    max-width: 580px !important;
    background-color: $white !important;
    color: $blue !important;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.56;
    padding: 18px 20px !important;
    box-shadow: 0 0 9px 4px rgba(214, 214, 214, 0.5);
    @media (max-width: $mobile-max-width) {
      max-width: 300px !important;
    }
  }

  &_icon {
    padding: 5px;
  }

  &_label {
    font-size: 18px;
    color: $blue;
    font-weight: 700;
    margin-bottom: 10px;
    @media (max-width: $mobile-max-width) {
      font-size: 17px;
      max-width: 100%;
    }
  }
}

.tooltip-inner {
  opacity: 1 !important;
}

.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
  border-bottom-color: aqua !important; // default is #000;
}

but nothing works. If anyone knows a solution for this, any help will be appreciated.

Improve this question
6
  • I ran up the comment section on my answer lol. Make sure you're using !important in your SCSS files in order to override Bootstrap. This latest update should do the trick. Commented Aug 21, 2020 at 19:13
  • If the color on the arrow doesn't work, try setting a className on it like .aqua-triangle and then override using that selector. The .tooltip-inner should work just using that class selector and the !important keyword. Commented Aug 21, 2020 at 19:17
  • @ihodonald I don't know what's happening and why it doesn't work.. I've tried your solution and the styles doesn't apply.. just don't get it why, maybe it's a problem from the props applied to the component? Commented Aug 21, 2020 at 20:02
  • @ihodonald I found a clue now, if I put opacity: 0.5 !important; in &_tooltip (I've edited the post) it's working but only for values <= 0.9. I don't get why doesn't apply opacity: 1 !important; Commented Aug 21, 2020 at 20:11
  • 1
    Here seems like the default it's 0.9 .. for example now when It must be 1, it sets himself to 0.9.. I'll dig next days for this solution, maybe it has to do something with those classNames props.. thank you very much for your time and help, really appreciate it. Commented Aug 21, 2020 at 20:51

2 Answers 2

Reset to default
1

This can be done with CSS. If you don't want to change all tooltips globally, use CSS selectors.

Edit 1: You need to use the border-bottom-color for an arrow that points upwards. Check out this doc: https://css-tricks.com/snippets/css/css-triangle/

Edit 1: You're using .tooltip.inner in your SCSS, which needs to be .tooltip-inner

Edit 2: You have to use !important to override most Bootstrap rules.

Arrow (with tooltip positioned at the bottom)

.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
    border-bottom-color: aqua !important; // default is #000;
}

Result

enter image description here

Tooltip opacity

.tooltip-inner {
    opacity: .8 !important; // default is 1
}

Result

enter image description here

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

I tried your solution and it's not working, the styles are not applied. I don't understand why
@Christian Go here: reactstrap.github.io/components/tooltips then open up your Dev Tools, trigger a tooltip (make sure you are focused on the document, not the Dev Tools by clicking on the page), Hit F8 (for debugger), and inspect the tooltip itself (Ctrl + Shift + C). All reactstrap does is provide CSS rules to elements that are positioned using a library called Tether (not important for what you're doing). I've been doing it like this for years.
@Christian You may have to make some changes depending on where you are positioning the tooltip. This example assumes that your are using the tooltip positioned to the right.
in my project it's exactly like in your example, with opacity of 0.9 in .tooltip.show class. I tried exactly your example with placement="bottom" and it doesn't apply for neither one
I've updated the post to see how my scss file looks now
|
0

Check the Element body section, maybe your tooltip appear the out of your scss section.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.