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