réagir bootstrap info-bulle, comment puis-je tirer?

Ont ajouté une info-bulle et déclencheur de mon composant, comment puis-je obtenir le feu à la bulle d'aide?

les modules requis, comme ceci:

var Icon = require('./Icon'),
Tooltip = require('./Tooltip'),
Button = require('react-bootstrap').Button,
OverlayTrigger = require('react-bootstrap').OverlayTrigger;

getTooltip: function() {

    return <Tooltip text="sample text" />;
},

Rendu de déclenchement comme ceci:

<OverlayTrigger placement="right" overlay={this.getTooltip()}>
       <Button bsStyle="default">Button text to trigger</Button>
</OverlayTrigger>

Mais rien ne se passe?

Comment puis-je obtenir ce à feu?

Grâce

Composant Tooltip est:

var TooltipBS = require('react-bootstrap').Tooltip;

var Tooltip = React.createClass({

render: function() {

    return (
        <TooltipBS>
            {this.props.text}
        </TooltipBS>
    )
}
});

module.exports = Tooltip;
  • En fait, vous pouvez le faire avec les css. Juste de retour d'un autre style spécifique divs
InformationsquelleAutor Bomber | 2015-10-08
  1. 4

    Je suppose que vous êtes à l'aide de réagir-bootstrap info-bulle?

    Si vous lisez la documentation ici http://react-bootstrap.github.io/components.html#tooltips-in-text vous pouvez voir comment l'utiliser dans votre code.

    <OverlayTrigger placement="right" overlay={this.getTooltip()} trigger="click">
       <Button bsStyle="default">Button text to trigger</Button>
</OverlayTrigger>

    Vous pouvez ajouter préféré un événement déclencheur, avec trigger propriété.

    • Merci pour la réponse, je suis à l'aide de réagir info-bulle, j'ai utilisé votre code et d'obtenir aucune info-bulle, des idées?
    • Si vous utilisez le bouton et overlayTrigger de réagir-bootstrap, je recommanderais également utiliser l'info-bulle de réagir-bootstrap.
    • Le lien ne fonctionne plus
    InformationsquelleAutor Ales Maticic
  2. 1

    Il devrait être:

    getTooltip: function() {

    return <Tooltip id="tooltip">sample text</Tooltip>;
},
    InformationsquelleAutor CRANE
  3. 0

    Je crois que vous aurez besoin d'un render() dans la classe du composant. Ensuite, vous aurez besoin d'un ReactDOM.render(<Tooltip />, document.getElementById('app'); à l'extérieur de la classe.

    InformationsquelleAutor Heather