Etykietka narzędziowa Bootstrap nie działa z react.js

Question

Próbowałem użyć etykietki bootstrap na przycisku, aby wyświetlić pełne informacje. Ale to nie działa. Etykieta nie jest wyświetlana.

Oto moja reagować kod:

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

I nawet próbować włączyć go za pomocą metody javascript Bootstrap niczym:

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

Co należy zrobić dla niego? Dziękuję ..

Answer 1

Mogę tylko zgadywać bez demo, że dzwonisz pod numer .tooltip na gotowym dokumencie, ale przed faktycznym renderowaniem komponentu.

Spróbuj:

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 rozważają swój przycisk Opłaty bardziej znaczącą nazwę niż „dane”