Bootstrap工具提示無法與react.js一起使用

我試圖在按鈕上使用引導工具提示來顯示完整信息。但它不起作用。工具提示沒有得到顯示。Bootstrap工具提示無法與react.js一起使用

這裏是我的反應代碼：

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

我一下，也包括它使用自舉的JavaScript方法，如：

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

我應該怎麼爲它做什麼？謝謝..

來源

2015-10-14 Swapnil Bhikule

是不是因爲你的位置，它不能被看到的？ ..嘗試更改數據放置？ .. – DTH

剛剛遇到同樣的問題，通過使用react-bootstrap工具提示組件（即使我不滿意使用這麼多簡單的代碼來完成這項工作，它也能很好地完成工作）進行修復。 –

的可能的複製[如何使用與陣營引導提示？（https://stackoverflow.com/questions/33656024/how-do-use-bootstrap-tooltips-with-react） – shaedrich

我只能猜測沒有演示，你打電話給.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考慮給你的按鈕REF更有意義的名稱比「數據」

來源

2015-10-14 14:44:28

我想你的方法，但它不工作。瀏覽器顯示工具提示，但沒有任何像只有白色背景和黑色默認字體文本矩形框中的數據的CSS，而不是像白色文本黑色背景的引導方式。 –

@SwapnilBhikule聽起來像css沒有加載？ –

編號CSS正在加載，因爲像導航欄，divs等所有其他引導CSS正反應工作正常。 –

Bootstrap工具提示無法與react.js一起使用

回答

相關問題