chore: add tooltip to buttons

This commit is contained in:
Steven 2023-07-14 20:45:06 +08:00
parent 4279151238
commit 65545c78c6
2 changed files with 17 additions and 13 deletions

View File

@ -37,7 +37,7 @@ const GenerateQRCodeDialog: React.FC<Props> = (props: Props) => {
<Modal open={true}> <Modal open={true}>
<ModalDialog> <ModalDialog>
<div className="flex flex-row justify-between items-center w-64 mb-4"> <div className="flex flex-row justify-between items-center w-64 mb-4">
<span className="text-lg font-medium">Download QR Code</span> <span className="text-lg font-medium">QR Code</span>
<Button variant="plain" onClick={handleCloseBtnClick}> <Button variant="plain" onClick={handleCloseBtnClick}>
<Icon.X className="w-5 h-auto text-gray-600" /> <Icon.X className="w-5 h-auto text-gray-600" />
</Button> </Button>

View File

@ -79,18 +79,22 @@ const ShortcutView = (props: Props) => {
<Icon.ExternalLink className="w-4 h-auto text-gray-600" /> <Icon.ExternalLink className="w-4 h-auto text-gray-600" />
</span> </span>
</a> </a>
<Tooltip title="Copy" variant="solid" placement="top" arrow>
<button <button
className="hidden group-hover:block w-6 h-6 cursor-pointer rounded-full text-gray-500 hover:bg-gray-100 hover:shadow hover:text-blue-600" className="hidden group-hover:block w-6 h-6 cursor-pointer rounded-full text-gray-500 hover:bg-gray-100 hover:shadow hover:text-blue-600"
onClick={() => handleCopyButtonClick()} onClick={() => handleCopyButtonClick()}
> >
<Icon.Clipboard className="w-4 h-auto mx-auto" /> <Icon.Clipboard className="w-4 h-auto mx-auto" />
</button> </button>
</Tooltip>
<Tooltip title="QR Code" variant="solid" placement="top" arrow>
<button <button
className="hidden group-hover:block ml-1 w-6 h-6 cursor-pointer rounded-full text-gray-500 hover:bg-gray-100 hover:shadow hover:text-blue-600" className="hidden group-hover:block ml-1 w-6 h-6 cursor-pointer rounded-full text-gray-500 hover:bg-gray-100 hover:shadow hover:text-blue-600"
onClick={() => setShowQRCodeDialog(true)} onClick={() => setShowQRCodeDialog(true)}
> >
<Icon.QrCode className="w-4 h-auto mx-auto" /> <Icon.QrCode className="w-4 h-auto mx-auto" />
</button> </button>
</Tooltip>
</div> </div>
<div className="flex flex-row justify-end items-center space-x-2"> <div className="flex flex-row justify-end items-center space-x-2">
{havePermission && ( {havePermission && (