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

Without using refs / React DOM, you can select tooltips by data-toggle attribute:

componentDidMount() {
  $('[data-toggle="tooltip"]').tooltip();
}

componentDidUpdate() {
  $('[data-toggle="tooltip"]').tooltip();
}

Source: Bootstrap documentation

Note, if you're loading jQuery by CDN, you can refer to it by window.$ as well.

I had this very same problem when my trigger was close to the right side of the window. I fixed it by overwriting the max-width of the .popover class to:

.popover{
  max-width: none;
}

and defining a width to the element inside the popover.