Bootstrap 4 Tooltips


#1

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.


#2

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.


#3

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.


#4

Would still love a way to do it with normal bootstrap though?


#5

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 };

#6

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