Question

我试图在反应引导程序工具提示中更改工具提示背景颜色。

从这个post

可以在css文件中更改它。但是我可以显示40种不同的颜色。

我一直在尝试这样做：

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

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

感谢您的帮助。

Answer 1

好的，所以这样做，看看是否有助于你。尽管如此，这并不是一种很好的反应方式。

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>

动态更改反应引导工具提示颜色

2 个答案: