I had tooltips working earlier and am trying to migrate my component to React. I'm not using react-bootstrap yet because I'm not sure if I'm going to because it's still under heavy development and not 1.0 yet.
Here's a snippet of what my render code looks like:
<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>
And calling it:
<MyComponent name="apple" tooltip="banana" />
I know you have to call the tooltip function to get it to show up and I think that's where I'm messing up. I'm currently trying something like this:
componentDidMount() {
$(this.refs.test).tooltip();
// this.refs.test.tooltip(); ?
// $('[data-toggle="tooltip"]').tooltip(); ?
}
But none of this seems to be working. The tooltip isn't showing up.
Without using refs / React DOM, you can select tooltips by data-toggle attribute:
componentDidMount() {
$('[data-toggle="tooltip"]').tooltip();
}
componentDidUpdate() {
$('[data-toggle="tooltip"]').tooltip();
}
Source: Bootstrap documentation
Note, if you're loading jQuery by CDN, you can refer to it by window.$ as well.
I found out the problem. I was putting the data-toggle
and title
on the wrong element (it should go on the label instead). Also, $(this.refs.test).tooltip();
works fine.
I know it s an old question, but to avoid side effects with bootstrap/jquery/react, if you want tooltips, use this :
https://www.npmjs.com/package/react-tooltip
It's very easy to use and works better than bootstrap tooltip in a react project
you need to get the real DOM representation, try this please:
$(this.refs.test.getDOMNode()).tooltip();
$(React.findDOMNode(this.refs.test)).tooltip();
var ReactDom = require('react-dom');
$(ReactDom.findDOMNode(this.refs.test)).tooltip();
It would be better if you use real React components because React only writes to the DOM so it cannot recognize any changes made my others which could clash with.
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>
);
(Example taken from https://react-bootstrap.github.io/components/tooltips/ )
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.