Hey
Just wondering what the recommend way would be in meteor + react to enable bootstrap 4’s tooltip functionality?
Online folk seem to suggest putting the enable script into a template like this:
Template.header.rendered = function() {
$('[data-toggle="tooltip"]').tooltip({placement: 'bottom'});
};
Although I’m not sure where this code should go?
Any help would be awesome.
Cheers,
R.
There are ways to make this work, but before we head down that path, a quick question. Have you considered using something like React-Bootstrap instead? Yes it only supports Bootstrap 3 at the moment (4 is still alpha anyways), but using it means you don’t have to integrate jQuery with React. It gives you a React based Tooltip component right out of the box.
Yeah no main reason really except I generally try to stay as close to source as possible.
I had a look at react-bootstrap and wasn’t a fan of it’s implementation but not a blocker by any means if that’s the best way to go. I’ll take another look at it.
Would still love a way to do it with normal bootstrap though?
Okay - here’s a quick example:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { $ } from 'meteor/jquery';
class TooltipExample extends Component {
componentDidMount() {
$(ReactDOM.findDOMNode(this.refs.tooltip)).tooltip();
}
render() {
return (
<button ref="tooltip" data-placement="bottom" title="This is a tooltip!">
Click Me!
</button>
);
}
}
export { TooltipExample };