Example from https://react-md.dev/packages/tooltip/demos#auto-positioning-tooltips

Tooltip Example - Auto Positioning Tooltips

<!DOCTYPE html>
<html lang="en" class="light-theme">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Material+Icons|Roboto:400,500,700|Source+Code+Pro"
    />
    
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/mlaursen/react-md@5.1.6/themes/react-md.teal-pink-200-light.min.css"
    />
    <title>Tooltip Example - Auto Positioning Tooltips</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

.container {
  align-items: center;
  display: flex;
  flex-wrap: wrap;

  :global .rmd-button {
    margin: 1rem;
  }
}

.stacked {
  flex-direction: column;
}


import type { HTMLAttributes, ReactElement } from "react";
import cn from "classnames";

import styles from "./Container.module.scss";

interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
  stacked?: boolean;
}

export default function Container({
  className,
  children,
  stacked = false,
  ...props
}: ContainerProps): ReactElement {
  return (
    <div
      {...props}
      className={cn(
        styles.container,
        {
          [styles.stacked]: stacked,
        },
        className
      )}
    >
      {children}
    </div>
  );
}


import type { ReactElement } from "react";

import Container from "./Container";
import TooltippedButton from "./TooltippedButton";

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


import type { ReactElement, ReactNode } from "react";
import type { ButtonProps } from "@react-md/button";
import { Button } from "@react-md/button";
import type { TooltipHookOptions } from "@react-md/tooltip";
import { Tooltip, useTooltip } from "@react-md/tooltip";

interface TooltippedButtonProps
  extends ButtonProps,
    Pick<
      TooltipHookOptions<HTMLButtonElement>,
      "defaultPosition" | "dense" | "position" | "focusTime" | "touchTime"
    > {
  id: string;
  tooltip: ReactNode;
}

export default function TooltippedButton({
  id,
  tooltip,
  onClick,
  onBlur,
  onFocus,
  onKeyDown,
  onMouseEnter,
  onMouseLeave,
  onTouchStart,
  onContextMenu,
  children,
  dense,
  position,
  defaultPosition,
  focusTime,
  touchTime,
  ...props
}: TooltippedButtonProps): ReactElement {
  const { elementProps, tooltipProps } = useTooltip({
    baseId: id,
    dense,
    onClick,
    onBlur,
    onFocus,
    onKeyDown,
    onMouseEnter,
    onMouseLeave,
    onTouchStart,
    onContextMenu,
    position,
    focusTime,
    touchTime,
    defaultPosition,
  });

  return (
    <>
      <Button {...props} {...elementProps}>
        {children}
      </Button>
      <Tooltip {...tooltipProps}>{tooltip}</Tooltip>
    </>
  );
}

TooltippedButton.defaultProps = {
  themeType: "outline",
};


@use "@react-md/theme/dist/color-palette" as *;
// Note: Outside of codesandbox, this can be `@forward "react-md" with (`
@forward "react-md/dist/everything" with (
  $rmd-theme-light: true,
  $rmd-theme-primary: $rmd-teal-500,
  $rmd-theme-secondary: $rmd-pink-a-200,
);


import { render } from "react-dom";
import { Configuration } from "@react-md/layout";

// the styles are actually loaded as the pre-compiled themes in the index.html
// to speed up sandbox compilation. If you want to update the theme, you'll need
// to uncomment this line and remove the `<link>` tag in the `index.html`
// import "./styles.scss"

import Demo from "./Demo";

const App = () => (
  <Configuration>
    <Demo />
  </Configuration>
);

render(<App />, document.getElementById("root"));


@use "./everything" as *;

@include react-md-utils;
