<HtmlTooltip
              disableInteractive
              title={
                <>
                  <div className="widget-header paddingLeft5 fontBold fontSize14">{t("user-details")}</div>
                  <div className="widget-content">
                    <TableContainer component={Paper}>
                      <Table size="small" sx={{ minWidth: 400 }}>
                        <TableBody>
                          <TableRow
                            sx={{
                              "& td": { border: 0 },
                            }}
                          >
                            <TableCell scope="row">{t("username")}</TableCell>
                            <TableCell
                              align="right"
                              sx={{
                                wordWrap: "break-word",
                                maxWidth: 150,
                              }}
                            >
                              {info.row.original["username"]}
                            </TableCell>
                          </TableRow>
                          <TableRow
                            sx={{
                              "& td": { border: 0 },
                            }}
                          >
                            <TableCell scope="row">{t("email")}</TableCell>
                            <TableCell align="right">{info.row.original["email"]}</TableCell>
                          </TableRow>
                          <TableRow
                            sx={{
                              "& td": { border: 0 },
                            }}
                          >
                            <TableCell scope="row">{t("secondary-email")}</TableCell>
                            <TableCell align="right">{info.row.original["secondary_email"]}</TableCell>
                          </TableRow>
                          <TableRow
                            sx={{
                              "& td": { border: 0 },
                            }}
                          >
                            <TableCell scope="row">{t("statusinfo")}</TableCell>
                            <TableCell align="right">
                              {info.row.original["inactive"] ? t("inactive") : t("active")}
                            </TableCell>
                          </TableRow>
                          <TableRow
                            sx={{
                              "& td": { border: 0 },
                            }}
                          >
                            <TableCell scope="row">{t("primary-coach")}</TableCell>
                            <TableCell align="right">{info.row.original["primary_coach"]?.email}</TableCell>
                          </TableRow>
                        </TableBody>
                      </Table>
                    </TableContainer>
                  </div>
                </>
              }
              placement="right"
              arrow
            >
              <Button
                className="buttonFontColor"
                sx={{ minWidth: "auto" }}
                aria-label="Info"
                onClick={(e) => e.stopPropagation()}
                onKeyDown={(e) => {
                  if (e.key === "Enter" || e.key === " ") {
                    e.stopPropagation();
                  }
                }}
              >
                <FontAwesomeIcon icon={faInfoCircle} />
              </Button>
            </HtmlTooltip>
i want this HtmlTooltip to open when i press the button but currently it is opening when i hover on button