Tooltips not showing in my react app

I have put tooltips in my react app but not a single one of them showing. why is this? where is the fault lies? I 'll post the code here.

TooltipSpan.js

import React from 'react';
import { OverlayTrigger } from 'react-bootstrap';

const TooltipSpan = (props) => {
  const { tooltip, className } = props;

  return (
    <OverlayTrigger placement="top" overlay={tooltip}>
      <span className={className} />
    </OverlayTrigger>
  );
};
export default TooltipSpan;

importing this to the below file.

Like.js
import React, { Component } from 'react';
import { OverlayTrigger, Tooltip } from 'react-bootstrap';
import TooltipSpan from './TooltipSpan.js';

class Like extends Component {

  handleAddition = () => {
    this.props.onAddition();
  }

  handleDelete = () => {
    this.props.onDelete();
  }

  render() {
    const { isLiked, canLike, isBlocked, isReported } = this.props;
    const tooltipCannotLike = (
      <Tooltip id="cannot-like">You can not like a profile without a profile picture !</Tooltip>
    );
    const tooltipLike = (
      <Tooltip id="like">Like this profile to be able to talk to him. He also like you !</Tooltip>
    );

    if (isBlocked || isReported) {
      return <span className="fa fa-star cannot-like" />;
    }
    if (!canLike) {
      return <TooltipSpan className="fa fa-star cannot-like" tooltip={tooltipCannotLike} />;
    }
    if (isLiked) {
      return <button className="fa fa-star liked" onClick={this.handleDelete} />;
    }
    return (
      <OverlayTrigger placement="bottom" overlay={tooltipLike}>
        <span>
          <button
            className="fa fa-star-o"
            onClick={this.handleAddition}
          />
        </span>
      </OverlayTrigger>
    );
  }
}
export default Like;

Like.js is one file. I have a block and report js files, and not a single tooltips working in those files too. I have one question. Does the building the app fix the issues like this? I haven't yet built this app.