Блог

Я новичок в пользовательском интерфейсе Material. Поэтому я попытался изменить существующий код и столкнулся с этой проблемой. Я хочу изменить представление на .

Это существующий код

 <TableCell>
    <Button  >
      <InfoRounded style={{ color: "teal" }} onMouseOver={handleClickOpen}/>
    </Button>
    <SimpleDialog open={open} onClose={handleClose} />
  </TableCell>
 

Эта кодировка аналогична примеру в пользовательском интерфейсе Material.
Ссылка на образец кодирования пользовательского интерфейса материала

Это то, что я пробовал до сих пор

 <TableCell>
    <Tooltip title ="I need to get the Dialog view here" InfoRounded>
      <Button sx={{m:1}}>
        <InfoRounded style={{color:"teal"}}/>
      </Button>
    </Tooltip>
  </TableCell>
 

Мне нужно получить вид диалогового окна в этой подсказке. Кто-нибудь может мне в этом помочь? Я пытался больше дня и все еще не мог этого понять.

Когда я наведу курсор на кнопку, должна появиться диалоговое окно, и когда я наведу указатель мыши, оно должно автоматически закрыть диалоговое окно. (В настоящее время с первым кодом диалоговое окно откроется при наведении на кнопку, но чтобы закрыть его, мне нужно щелкнуть по экрану)