frontPanel/src/ui_kit/Toolbars/TooltipClickInfo.tsx

import { Button, ClickAwayListener, IconButton, Tooltip } from "@mui/material";
import InfoIcon from "@icons/InfoIcon";
import { useState } from "react";

export default function TooltipClickInfo({ title }: { title: string }) {
  const [open, setOpen] = useState(false);

  const handleTooltipClose = () => {
    setOpen(false);
  };

  const handleTooltipOpen = () => {
    setOpen(true);
  };

  return (
    <>
      <ClickAwayListener onClickAway={handleTooltipClose}>
        <div>
          <Tooltip
            PopperProps={{
              disablePortal: true,
              sx: {
                "& .MuiTooltip-tooltip": {
                  fontSize: "14px",
                  padding: "12px",
                  maxWidth: "400px",
                  whiteSpace: "pre-line"
                }
              }
            }}
            placement="top"
            onClose={handleTooltipClose}
            open={open}
            title={title}
            onMouseEnter={handleTooltipOpen}
            onMouseLeave={handleTooltipClose}
          >
            <IconButton onClick={handleTooltipOpen}>
              <InfoIcon />
            </IconButton>
          </Tooltip>
        </div>
      </ClickAwayListener>
    </>
  );
}