动态更改 React bootstrap 工具提示颜色

Question

我正在尝试更改 React bootstrap 工具提示中的工具提示背景颜色。

从这个 post 可以在 css 文件中更改。但是我可能有 40 种不同的颜色要显示。

我一直在尝试这样做：

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

但这就是行不通。我无法在渲染中设置 tooltip_inner，我不确定如何动态访问它。我试过 getElementsBy-Name 但这也不起作用。

感谢您的帮助。

Answer 1

好的，就这样完成了，看看对你有没有帮助。虽然这不是一种非常反应（y）的方式。

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';
};

Answer 2

.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>

动态更改 React bootstrap 工具提示颜色

change react bootstrap tooltip color dynamically

colors

dynamic

tooltip

reactjs

react-bootstrap