import React from "react";
import { Tooltip } from "../../";
import { TooltipInner } from "../../";

export default (
  <div className="row m-5">
    <div className="col">
      <Tooltip reference={<span>Hover me</span>} tooltip={"Dropdown text"} placement="top" />
    </div>
    <div className="col">
      <Tooltip
        reference={<span>Hover me</span>}
        tooltip={[<span>Very looooooooooooooong dropdown text</span>]}
        placement="top"
      />
    </div>
    <div className="col">
      <Tooltip reference={<span>Hover me</span>} placement="top">
        <TooltipInner className="mw-100">
          <span>Very looooooooooooooong dropdown text</span>
        </TooltipInner>
      </Tooltip>
    </div>
  </div>
);