CODEWITHSUNDEEP
javascriptcssreactjsreactstrap
user9855821
user9855821

Reputation:

reactstrap tooltip custom css not working

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.

Upvotes: 0

Views: 5593

Answers (2)

Elif
Elif

Reputation: 161

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

Upvotes: 0

imgnx
imgnx

Reputation: 789

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

Upvotes: 1

Related Questions