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}>
<ModalDialog>
<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}>
<Icon.X className="w-5 h-auto text-gray-600" />
</Button>

View File

@ -79,18 +79,22 @@ const ShortcutView = (props: Props) => {
<Icon.ExternalLink className="w-4 h-auto text-gray-600" />
</span>
</a>
<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"
onClick={() => handleCopyButtonClick()}
>
<Icon.Clipboard className="w-4 h-auto mx-auto" />
</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"
onClick={() => setShowQRCodeDialog(true)}
>
<Icon.QrCode className="w-4 h-auto mx-auto" />
</button>
<Tooltip title="Copy" variant="solid" placement="top" arrow>
<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"
onClick={() => handleCopyButtonClick()}
>
<Icon.Clipboard className="w-4 h-auto mx-auto" />
</button>
</Tooltip>
<Tooltip title="QR Code" variant="solid" placement="top" arrow>
<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"
onClick={() => setShowQRCodeDialog(true)}
>
<Icon.QrCode className="w-4 h-auto mx-auto" />
</button>
</Tooltip>
</div>
<div className="flex flex-row justify-end items-center space-x-2">
{havePermission && (