Bootstrap tooltip is not working with react.js

Question

I was trying to use bootstrap tooltip on button to display complete information. But it is not working. Tooltip is not getting displayed.

Here is my react code:

<button type="button" ref="data" value={this.props.data} onClick={this.submit} className="btn btn-default btn-block" data-toggle="tooltip" data-placement="top" title={ this.props.data }>
{ this.props.data.length > 20 ?
this.props.data.substring(0, 20)+'...' : this.props.data }
</button>

I even try to include it using bootstrap's javascript method like:

<script>
$(function () {
    $('[data-toggle="tooltip"]').tooltip()
})
</script>

What should I do for it? Thank you..

Answer 1

I can only guess without a demo that you are calling .tooltip on document ready, but before the component has actually rendered.

Try:

componentDidMount: function() {
  this.attachTooltip();
},

componentDidUpdate: function() {
  this.attachTooltip();
},

attachTooltip: function() {
  $(this.refs.data).tooltip();
  // Or for React <0.14 -
  // $(this.refs.data.getDOMNode()).tooltip();
}

PS consider giving your button ref a more meaningful name than 'data'