Wie kann die Verwendung von bootstrap tooltips mit Reagieren?

Hatte ich die tooltips arbeiten früher und versuche zu migrieren, meine Komponente zu Reagieren. Ich bin nicht mit reagieren-bootstrap noch, weil ich bin mir nicht sicher, wenn ich dabei bin, weil es immer noch unter starker Entwicklung, und nicht 1.0 noch.

Hier ist ein Ausschnitt von dem, was meine render-code sieht wie folgt aus:

<span>
    <input data-toggle="tooltip" ref="test" title={this.props.tooltip}  type="radio" name="rGroup" id={"r" + this.props.name} />
    <label className="btn btn-default" htmlFor={"r" + this.props.name}></label>
</span>

Und nannte es:

<MyComponent name="apple" tooltip="banana" />

Ich weiß, haben Sie zum Aufruf des QuickInfo-Funktion, um es zu zeigen, und ich denke, das ist, wo ich bin Durcheinander. Ich versuche momentan so etwas wie dieses:

componentDidMount() {
    $(this.refs.test).tooltip();
    //this.refs.test.tooltip(); ?
    //$('[data-toggle="tooltip"]').tooltip(); ?
}

Aber nichts davon scheint zu funktionieren. Der tooltip nicht angezeigt.

InformationsquelleAutor Ryan Peschel | 2015-11-11
  1. 12

    Ohne mit refs /Reagieren, DOM, können Sie tooltips durch das data-toggle-Attribut:

    componentDidMount() {
  $('[data-toggle="tooltip"]').tooltip();
}

componentDidUpdate() {
  $('[data-toggle="tooltip"]').tooltip();
}

    Quelle: Bootstrap-Dokumentation

    Beachten Sie, wenn Sie das laden von jQuery per CDN, können Sie es durch window.$ wie gut.

    • Funktionierte perfekt. Dies ist die genaue Antwort, die ich suchte.
    InformationsquelleAutor devonj
  2. 3

    Fand ich heraus, das problem. Ich war putting die data-toggle und title auf dem falschen element (es gehen sollte auf dem Etikett statt). Auch $(this.refs.test).tooltip(); funktioniert einwandfrei.

    InformationsquelleAutor Ryan Peschel
  3. 3

    Ich weiß, es ist eine alte Frage, aber, um Nebenwirkungen zu vermeiden mit bootstrap/jquery/reagieren, wenn Sie möchten, tooltips, verwenden Sie diese :

    https://www.npmjs.com/package/react-tooltip

    Es ist sehr einfach zu bedienen und arbeitet besser als bootstrap tooltip im react Projekt

    InformationsquelleAutor Guillaume Harari
  4. 1

    müssen Sie Holen Sie sich das echte DOM-Repräsentation, versuchen Sie diese bitte:

    12.x

    $(this.refs.test.getDOMNode()).tooltip();

    13.x

    $(React.findDOMNode(this.refs.test)).tooltip();

    14.x

    var ReactDom = require('react-dom');
$(ReactDom.findDOMNode(this.refs.test)).tooltip();
    • Es scheint, dass dieses veraltet ist. Ich habe versucht, die aktualisierte version zusammen mit einigen anderen Varianten, und keiner von Ihnen schien zu funktionieren.
    • hinsichtlich der änderungen in den Versionen..
    • Ja, das ist, was ich versucht habe und der tooltip noch nicht angezeigt werden. Ich dachte, dass es vielleicht etwas zu tun mit data-toggle oder title nicht anerkannt wird Reagieren oder sowas.. ich bin mir nicht sicher. Auch DOM sein sollte capitlized in Ihrem ReactDom Beispiel.
    • haben Sie versucht, die zu trösten.log() das Ergebnis Reagiert.findDOMNode() ?
    • >>Auch DOM sein sollte capitlized in Ihrem ReactDom Beispiel.<< Nein, es ist nur eine lokale variable, könnte es sein foo als gut 😉
    • Oh ja, richtig ich bin nur darunter, es aus dem cdn und Ihnen großgeschrieben wird. Ich werde versuchen, anmelden. Edit: Ja, es ist gefunden zu werden, und das Objekt wird protokolliert.

    InformationsquelleAutor webdeb
  5. 0

    Wäre es besser, wenn Sie mit real, Reagieren die Komponenten, da die Reagieren nur schreibt, um den DOM, damit er nicht erkennt änderungen gemacht mein anderen welcher konnte Zusammenstoß mit.

    https://github.com/react-bootstrap/react-bootstrap

    const tooltip = (
  <Tooltip id="tooltip">
    <strong>Holy guacamole!</strong> Check this info.
  </Tooltip>
);
const overlay = (
    <OverlayTrigger placement="left" overlay={tooltip}>
      <Button bsStyle="default">Holy guacamole!</Button>
    </OverlayTrigger>
);

    (Beispiel entnommen aus https://react-bootstrap.github.io/components/tooltips/)

    InformationsquelleAutor shaedrich
Schreibe einen Kommentar