How to use Material UI Tooltip

import * as React from "react";
import ZoomInIcon from "@mui/icons-material/ZoomIn";
import IconButton from "@mui/material/IconButton";
import Tooltip from "@mui/material/Tooltip";

export default function BasicTooltip() {
  return (
    <div style={{ margin: "100px" }}>
      <Tooltip title="Zoom In">
        <IconButton>
          <ZoomInIcon />
        </IconButton>
      </Tooltip>
    </div>
  );
}

import * as React from "react";
import Button from "@mui/material/Button";
import Tooltip from "@mui/material/Tooltip";

export default function ArrowTooltips() {
  return (
    <div style={{ margin: "25%" }}>
      {/* adding the arrow prop to ensure our tooltip has a pointer */}
      <Tooltip title="Arrow Tooltip" arrow>
        <Button>Arrow Tooltip</Button>
      </Tooltip>
    </div>
  );
}

import * as React from "react";
import { styled } from "@mui/material/styles";
import Button from "@mui/material/Button";
import Tooltip, { TooltipProps, tooltipClasses } from "@mui/material/Tooltip";

const CustomWidthTooltip = styled(({ className, ...props }: TooltipProps) => (
  <Tooltip {...props} classes={{ popper: className }} />
))({
  [`& .${tooltipClasses.tooltip}`]: {
    maxWidth: 500,
  },
});

const NoMaxWidthTooltip = styled(({ className, ...props }: TooltipProps) => (
  <Tooltip {...props} classes={{ popper: className }} />
))({
  [`& .${tooltipClasses.tooltip}`]: {
    maxWidth: "none",
  },
});

const longText = `
Aliquam eget finibus ante, non facilisis lectus. Sed vitae dignissim est, vel aliquam tellus.
Praesent non nunc mollis, fermentum neque at, semper arcu.
Nullam eget est sed sem iaculis gravida eget vitae justo.
`;

export default function VariableWidth() {
  return (
    <div style={{ margin: "25%" }}>
      <Tooltip title={longText}>
        <Button sx={{ m: 1 }}>Default Width [300px]</Button>
      </Tooltip>
      <CustomWidthTooltip title={longText}>
        <Button sx={{ m: 1 }}>Custom Width [500px]</Button>
      </CustomWidthTooltip>
      <NoMaxWidthTooltip title={longText}>
        <Button sx={{ m: 1 }}>No width set</Button>
      </NoMaxWidthTooltip>
    </div>
  );
}

import * as React from "react";
import Button from "@mui/material/Button";
import Tooltip from "@mui/material/Tooltip";
import Fade from "@mui/material/Fade";
import Zoom from "@mui/material/Zoom";

export default function TransitionsTooltips() {
  return (
    <div style={{ margin: "25%" }}>
      <Tooltip title="Grow" TransitionProps={{ timeout: 1000 }}>
        <Button>Grow</Button>
      </Tooltip>
      <Tooltip
        TransitionComponent={Fade}
        TransitionProps={{ timeout: 1000 }}
        title="Fade"
      >
        <Button>Fade</Button>
      </Tooltip>
      <Tooltip
        TransitionComponent={Zoom}
        title="Zoom"
        TransitionProps={{ timeout: 1000 }}
      >
        <Button>Zoom</Button>
      </Tooltip>
    </div>
  );
}

import * as React from "react";
import Box from "@mui/material/Box";
import Tooltip from "@mui/material/Tooltip";
import { Instance } from "@popperjs/core";

export default function AnchorElTooltips() {
  const positionRef = React.useRef<{ x: number; y: number }>({
    x: 0,
    y: 0,
  });
  const popperRef = React.useRef<Instance>(null);
  const areaRef = React.useRef<HTMLDivElement>(null);

  const handleMouseMove = (event: React.MouseEvent) => {
    positionRef.current = { x: event.clientX, y: event.clientY };

    if (popperRef.current != null) {
      popperRef.current.update();
    }
  };

  return (
    <div style={{ marginTop: 100 }}>
      <Tooltip
        title="Hover moves"
        placement="top"
        arrow
        PopperProps={{
          popperRef,
          anchorEl: {
            getBoundingClientRect: () => {
              return new DOMRect(
                positionRef.current.x,
                areaRef.current!.getBoundingClientRect().y,
                0,
                0,
              );
            },
          },
        }}
      >
        <Box
          ref={areaRef}
          onMouseMove={handleMouseMove}
          sx={{
            bgcolor: "primary.main",
            color: "primary.contrastText",
            p: 2,
          }}
        >
          Hover
        </Box>
      </Tooltip>
    </div>
  );
}

import * as React from "react";
import Tooltip from "@mui/material/Tooltip";
import Fade from "@mui/material/Fade";
import Zoom from "@mui/material/Zoom";

export default function TransitionsTooltips() {
  return (
    <div className="login-container">
      <Tooltip title="Please fill in this field." placement="right">
        <input className="input" type="text" placeholder="Username" />
      </Tooltip>
      <Tooltip
        TransitionComponent={Fade}
        TransitionProps={{ timeout: 600 }}
        title="Password should be at least 10 characters and include 1 uppercase and 1 lowercase alpha character, 1 number and 1 special character. Passwords are case sensitive. "
        placement="right"
      >
        <input
          type="password"
          className="input"
          placeholder="Password"
          placement="right"
        />
      </Tooltip>
      <Tooltip TransitionComponent={Zoom} title="" placement="right">
        <button className="button">Login</button>
      </Tooltip>
    </div>
  );
}