Tooltip Bootstrap non funziona con react.js

Question

Stavo cercando di usare il tooltip bootstrap sul pulsante per visualizzare informazioni complete. Ma non sta funzionando. La descrizione comando non viene visualizzata.

Ecco il mio codice reagiscono:

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

ho nemmeno provato ad inserirlo con il metodo javascript di bootstrap come:

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

Cosa devo fare per questo? Grazie ..

Answer 1

Posso solo indovinare senza una demo che si sta chiamando .tooltip sul documento pronto, ma prima che il componente abbia effettivamente eseguito il rendering.

Prova:

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 considerano dando il pulsante rif un nome più significativo di 'dati'