EDIT

React Tooltip

Reactjs Popup is built to be a tooltip by default

const Tooltip = () => (
  <Popup
    trigger={open => (
      <button className="button">Trigger - {open ? "Opened" : "Closed"}</button>
    )}
    position="right center"
    closeOnDocumentClick
  >
    <span> Popup content </span>
  </Popup>
);

React Tooltip position

import React from "react";
import Popup from "reactjs-popup";

const Card = ({ title }) => (
  <div className="card">
    <div className="header">{title} position </div>
    <div className="content">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit autem
      sapiente labore architecto exercitationem optio quod dolor cupiditate
    </div>
  </div>
);

const ToolTipPositions = () => (
  <div className="example-warper">
    <Popup
      trigger={<button className="button"> Right Top </button>}
      position="right top"
      on="hover"
    >
      <Card title="Right Top" />
    </Popup>

    <Popup
      trigger={<button className="button"> Bottom Center </button>}
      position="bottom center"
      on="hover"
    >
      <Card title="Bottom Center" />
    </Popup>

    <Popup
      trigger={<button className="button"> Left Top </button>}
      position="left top"
      on="hover"
    >
      <Card title="Left Top" />
    </Popup>

    <Popup
      trigger={<button className="button"> Right Center </button>}
      position="right center"
      on="hover"
    >
      <Card title="Right Center" />
    </Popup>
    <Popup
      trigger={<button className="button"> Top Center </button>}
      position="top center"
      on="hover"
    >
      <Card title="Top Center" />
    </Popup>
    <Popup
      trigger={<button className="button"> left Center </button>}
      position="left center"
      on="hover"
    >
      <Card title="Left Center" />
    </Popup>
    <Popup
      trigger={<button className="button"> Right Bottom </button>}
      position="right bottom"
      on="hover"
    >
      <Card title="Right bottom" />
    </Popup>

    <Popup
      trigger={<button className="button"> Top Center </button>}
      position="top center"
      on="hover"
    >
      <Card title="Top Center" />
    </Popup>

    <Popup
      trigger={<button className="button"> Left Bottom </button>}
      position="left bottom"
      on="hover"
    >
      <Card title="Left Bottom" />
    </Popup>
  </div>
);
.card {
  font-size: 12px;
}
.card > .header {
  width: 100%;
  border-bottom: 1px solid gray;
  font-size: 14px;
  text-align: center;
}