EDIT

Nested React Tooltip

reactjs-popup support nested Tooltip

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

const NestedToolTip = () => (
  <Popup
    trigger={<button className="button"> Trigger 1 </button>}
    position="top center"
    closeOnDocumentClick
  >
    <div>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores dolor
      nulla animi, natus velit assumenda deserunt molestias
      <Popup
        trigger={<button className="button"> Trigger 2 </button>}
        position="bottom left"
        closeOnDocumentClick
      >
        <div>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores
          dolor nulla animi, natus velit assumenda deserunt
          <Popup
            trigger={<button className="button"> Trigger 3 </button>}
            position="top right"
            closeOnDocumentClick
          >
            <span> Popup content </span>
          </Popup>
        </div>
      </Popup>
    </div>
  </Popup>
);

Bounded React Tooltip

reactjs-popup supports tooltip bounded inside an element(defaults to window)

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

const BoundedTooltip = () => (
  <div
    style={{ height: 200, width: 400, border: "1px solid #ccc" }}
    className={"tooltipBoundary"}
  >
    <Popup
      trigger={<button className="button"> Trigger 1 </button>}
      position={["top center", "bottom right", "bottom left"]}
      closeOnDocumentClick
      keepTooltipInside=".tooltipBoundary"
    />
  </div>
);

Play with React Tooltip

/* react-live */

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