我试图在按钮上使用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>
我该怎么办呢？
谢谢..
解决方法
我只能在没有演示的情况下猜测你在文件就绪时调用了.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考虑给你的按钮引用比“数据”更有意义的名称