How can you reuse a common overlay trigger - react-bootstrap

Question

I've got a field with dynamic values in it. Testing I posted about 500 buttons. Since each element currently gets it's own OverlayTrigger and Tooltip. The results of actually clicking on of the elements is super slow.
The Tooltip elements have only 2 unique elements. Which are "Click to enable" or "Click to disable". So I should only need 2 OverlayTriggers as well. Right now for each of the 500 buttons there are 500 different OverlayTriggers and 500 different Tooltips.
Is there a way to reduce this down to 2 OverlayTriggers and 2 Tooltips? Then add the unique buttons to the appropriate OverlayTrigger? Or should I come at this problem in a different direction?
Here's some code:
var bsstyle = this.props.enabled ? this.props.enableBsStyle : this.props.disableBsStyle;
var toolTipContent = `Click to ${this.props.enabled ? "disable" : "enable"}.`;
var toolTipId = `toolTip.${this.props.value}`;
const tooltip = (
<Tooltip id={toolTipId}>{toolTipContent}</Tooltip>
);
return (
<OverlayTrigger
placment={this.props.placement}
overlay={tooltip}
>
<Button
bsStyle={bsstyle}
bsSize="xs"
onClick={this.props.onClick}
>
{this.props.value}
</Button>
</OverlayTrigger>
Here's some testing code:
import React from 'react';
import ReactDom from 'react-dom';
import { Row, Col, Tooltip, OverlayTrigger, Button } from 'react-bootstrap';
import Formsy from 'formsy-react';
var values = [];
for (i=0; i < 500; i++){values.push({value: i, enabled: i % 2 === 0});}
const RemoveableLabel = React.createClass({
getDefaultProps: function (){
return {
placment: "bottom",
enableBsStyle: "primary",
disableBsStyle: "default",
enabled: true
};
},
render: function () {
var bsstyle = this.props.enabled ? this.props.enableBsStyle : this.props.disableBsStyle;
var toolTipContent = `Click to ${this.props.enabled ? "disable" : "enable"}.`;
var toolTipId = `toolTip.${this.props.value}`;
const tooltip = (
<Tooltip id={toolTipId}>{toolTipContent}</Tooltip>
);
return (
<OverlayTrigger placment={this.props.placement} overlay={tooltip}>
<Button bsStyle={bsstyle} bsSize="xs" onClick={this.props.onClick}>{this.props.value}</Button>
</OverlayTrigger>
);
},
});
const RemoveableLabelCollection = React.createClass({
mixins: [Formsy.Mixin],
handleClick: function(index){
var values = this.getValue();
var indexValue = values[index];
var enabled = indexValue.enabled ? false : true;
indexValue.enabled = enabled;
values[index] = indexValue;
this.setValue(values);
},
render: function () {
var self = this;
var labels = this.getValue().map(function (item, i) {
var boundClick = self.handleClick.bind(self, i)
return (
<RemoveableLabel key={i + self.props.name + item} name={self.props.name + item} value={item.value} enabled={item.enabled} onClick={boundClick}/>
);
});
return (
<Row>
<Col sm={12}>
{labels}
</Col>
</Row>
);
},
});
const View = React.createClass({
getInitialState: function(){return {labels: values, canSubmit: false};},
onInvalid: function () {
this.setState({ canSubmit: false });
},
onValid: function() {
this.setState({ canSubmit: true });
},
onSubmit: function(data) {
alert(JSON.stringify(data, null, 4));
this.setState({labels: []});
this.refs.form.reset();
},
render: function() {
var clsName = this.props.className;
return (
<Form ref="form" onSubmit={this.onSubmit} onValid={this.onValid} onInvalid={this.onInvalid} className={clsName}>
</Grid>
<Row>
<Col sm={12}>
<RemovableLabelCollection name="labels" value={this.state.labels}/>
</Col>
</Row>
</Grid>
</Form>
);
}
});
ReactDom.render(<View />, document.getElementById('root'));