CODEWITHSUNDEEP
reactjsdynamiccolorstooltipreact-bootstrap
user1610613
user1610613

Reputation: 527

change react bootstrap tooltip color dynamically

Im trying to change the tooltip background color in react bootstrap tooltip.

from this post it can be changed in the css file. However I have a possible 40ish different colors to display.

I have been trying to do things this way: 

<Tooltip id={this.props.name} style={{".tooltip_inner":{"background":backgroundColor}}}>{this.props.name}</Tooltip>

But it just doesn't work. I can't set the tooltip_inner in render and Im not sure how to access it dynamically. I've tried getElementsBy-Name but that doesn't work either.

Thank you for any help.

Upvotes: 2

Views: 11984

Answers (2)

Elawry kip
Elawry kip

Reputation: 11

.tooltip > div.tooltip-inner {
  background-color: @accentColor !important;
  color: @whiteColor !important;
}

.tooltip.show {
  opacity: 1 !important;
}

.tooltip > div.arrow::before {
  border-bottom-color: @accentColor !important;
  color: @whiteColor !important;
}
<html></html>

Upvotes: 1

hendrixchord
hendrixchord

Reputation: 5434

Ok so have done it this way see if that helps you. Not a very react(y) way of doing it though.

return (
    <OverlayTrigger placement="top" overlay={this.tooltip} onEntering={this.entering}>
                    <Button">Hover on me</Button>
    </OverlayTrigger>
);

tooltip = (
    <Tooltip id="tooltip"><strong>This is the tooltip. Yeah!</Tooltip>
);

// Set your color here
entering = (e) => {
    e.children[0].style.borderTopColor = 'green';
    e.children[1].style.backgroundColor = 'green';
};

Upvotes: 12

Related Questions