twitter-bootstrap - Bootstrap 工具提示不适用于 React.js

Question

我试图在按钮上使用 Bootstrap 工具提示来显示完整信息。但它不起作用。工具提示未显示。

这是我的 react 代码:

<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 考虑为您的按钮引用指定一个比“数据”更有意义的名称