Bootstrap工具提示不能与react.js一起使用

Question

我试图在按钮上使用bootstrap工具提示来显示完整的信息.但它没有用.工具提示未显示.

这是我的反应代码:

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

我甚至尝试使用bootstrap的javascript方法包含它,如:

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

我该怎么办呢？谢谢..

Answer 1

我只能在没有演示的情况下猜测您是否正在调用.tooltip文档,但是在组件实际呈现之前.

尝试:

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考虑给你的按钮引用比"数据"更有意义的名称