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,
            }}
            placement="top"
            onClose={handleTooltipClose}
            open={open}
            disableFocusListener
            disableHoverListener
            disableTouchListener
            sx={{
              fontSize: "12px",
              p:"10px"
            }}
            title={title}
          >
            <IconButton onClick={handleTooltipOpen}>
              <InfoIcon />
            </IconButton>
          </Tooltip>
        </div>
      </ClickAwayListener>
    </>
  );
}