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 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
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.
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/)
you need to get the real DOM representation, try this please:
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();