12345678910111213141516171819202122232425262728293031323334353637383940import React, { ReactElement } from "react";
import { Button } from "@react-md/button";
import { Tooltipped } from "@react-md/tooltip";

import Container from "./Container";

export default function Demo(): ReactElement {
  return (
    <Container stacked>
      <Tooltipped
        id="auto-positioning-above"
        tooltip="This is a tooltip"
        defaultPosition="above"
      >
        <Button themeType="outline">Above</Button>
      </Tooltipped>
      <Tooltipped
        id="auto-positioning-right"
        tooltip="This is a tooltip"
        defaultPosition="right"
      >
        <Button themeType="outline">Right</Button>
      </Tooltipped>
      <Tooltipped
        id="auto-positioning-bottom"
        tooltip="This is a tooltip"
        defaultPosition="below"
      >
        <Button themeType="outline">Below</Button>
      </Tooltipped>
      <Tooltipped
        id="auto-positioning-left"
        tooltip="This is a tooltip"
        defaultPosition="left"
      >
        <Button themeType="outline">Left</Button>
      </Tooltipped>
    </Container>
  );
}