1

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.

user1610613
  • 517
  • 8
  • 13

2 Answers2

9

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';
};
hendrixchord
  • 4,662
  • 4
  • 25
  • 39
1

.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>
Elawry kip
  • 11
  • 4