Bootstrap tooltip не работает с response.js

Question

Я пытался использовать всплывающую подсказку для загрузки, чтобы отобразить полную информацию. Но это не работает. Всплывающая подсказка не отображается.

Вот мой реагировать код:

<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 как:

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

Что я должен сделать для этого? Спасибо ..

Answer 1

Я могу только догадываться без демонстрации, которую вы вызываете .tooltip на документе, но до того, как компонент действительно визуализировался.

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 рассмотреть вопрос о придании вашей кнопки реф более значимое имя, чем «данные»