Bootstrap 4 Tooltips


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.


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() {

  render() {
    return (
      <button ref="tooltip" data-placement="bottom" title="This is a tooltip!">
        Click Me!

export { TooltipExample };

Here’s another way of making tooltips, http://sandbox.kā