From bcd07115c24faf7dc6074a876950070fa40bfeef Mon Sep 17 00:00:00 2001
From: binwiederhier <phil@heckel.io>
Date: Sun, 8 Mar 2026 18:30:11 -0400
Subject: [PATCH] Add tooltips for edit/delete buttons

---
 docs/releases.md                   |  5 +++--
 web/src/components/Account.jsx     | 24 +++++++++++++---------
 web/src/components/Preferences.jsx | 32 +++++++++++++++++++-----------
 3 files changed, 38 insertions(+), 23 deletions(-)

diff --git a/docs/releases.md b/docs/releases.md
index a3a077d7..15018d88 100644
--- a/docs/releases.md
+++ b/docs/releases.md
@@ -1755,8 +1755,9 @@ and the [ntfy Android app](https://github.com/binwiederhier/ntfy-android/release
 
 ## Not released yet
 
-### ntfy server v2.19.0 (UNRELEASED)
+### ntfy server v2.19.x (UNRELEASED)
 
 **Bug fixes + maintenance:**
 
-* Throttle notification sound in web app to play at most once every 2 seconds
+* Web: Throttle notification sound in web app to play at most once every 2 seconds (similar to [#1550](https://github.com/binwiederhier/ntfy/issues/1550), thanks to [@jlaffaye](https://github.com/jlaffaye) for reporting)
+* Web: Add hover tooltips to icon buttons in web app account and preferences pages ([#1565](https://github.com/binwiederhier/ntfy/issues/1565), thanks to [@jermanuts](https://github.com/jermanuts) for reporting)
diff --git a/web/src/components/Account.jsx b/web/src/components/Account.jsx
index bc5e3000..508d6de2 100644
--- a/web/src/components/Account.jsx
+++ b/web/src/components/Account.jsx
@@ -136,9 +136,11 @@ const ChangePassword = () => {
           ⬤⬤⬤⬤⬤⬤⬤⬤⬤⬤
         </Typography>
         {!account?.provisioned ? (
-          <IconButton onClick={handleDialogOpen} aria-label={t("account_basics_password_description")}>
-            <EditIcon />
-          </IconButton>
+          <Tooltip title={t("account_basics_password_description")}>
+            <IconButton onClick={handleDialogOpen} aria-label={t("account_basics_password_description")}>
+              <EditIcon />
+            </IconButton>
+          </Tooltip>
         ) : (
           <Tooltip title={t("account_basics_cannot_edit_or_delete_provisioned_user")}>
             <span>
@@ -899,12 +901,16 @@ const TokensTable = (props) => {
             <TableCell align="right" sx={{ whiteSpace: "nowrap" }}>
               {token.token !== session.token() && !token.provisioned && (
                 <>
-                  <IconButton onClick={() => handleEditClick(token)} aria-label={t("account_tokens_dialog_title_edit")}>
-                    <EditIcon />
-                  </IconButton>
-                  <IconButton onClick={() => handleDeleteClick(token)} aria-label={t("account_tokens_dialog_title_delete")}>
-                    <CloseIcon />
-                  </IconButton>
+                  <Tooltip title={t("account_tokens_dialog_title_edit")}>
+                    <IconButton onClick={() => handleEditClick(token)} aria-label={t("account_tokens_dialog_title_edit")}>
+                      <EditIcon />
+                    </IconButton>
+                  </Tooltip>
+                  <Tooltip title={t("account_tokens_dialog_title_delete")}>
+                    <IconButton onClick={() => handleDeleteClick(token)} aria-label={t("account_tokens_dialog_title_delete")}>
+                      <CloseIcon />
+                    </IconButton>
+                  </Tooltip>
                 </>
               )}
               {token.token === session.token() && (
diff --git a/web/src/components/Preferences.jsx b/web/src/components/Preferences.jsx
index 3ef62189..093cc775 100644
--- a/web/src/components/Preferences.jsx
+++ b/web/src/components/Preferences.jsx
@@ -385,12 +385,16 @@ const UserTable = (props) => {
             <TableCell align="right" sx={{ whiteSpace: "nowrap" }}>
               {(!session.exists() || user.baseUrl !== config.base_url) && (
                 <>
-                  <IconButton onClick={() => handleEditClick(user)} aria-label={t("prefs_users_edit_button")}>
-                    <EditIcon />
-                  </IconButton>
-                  <IconButton onClick={() => handleDeleteClick(user)} aria-label={t("prefs_users_delete_button")}>
-                    <CloseIcon />
-                  </IconButton>
+                  <Tooltip title={t("prefs_users_edit_button")}>
+                    <IconButton onClick={() => handleEditClick(user)} aria-label={t("prefs_users_edit_button")}>
+                      <EditIcon />
+                    </IconButton>
+                  </Tooltip>
+                  <Tooltip title={t("prefs_users_delete_button")}>
+                    <IconButton onClick={() => handleDeleteClick(user)} aria-label={t("prefs_users_delete_button")}>
+                      <CloseIcon />
+                    </IconButton>
+                  </Tooltip>
                 </>
               )}
               {session.exists() && user.baseUrl === config.base_url && (
@@ -738,12 +742,16 @@ const ReservationsTable = (props) => {
                   />
                 </Tooltip>
               )}
-              <IconButton onClick={() => handleEditClick(reservation)} aria-label={t("prefs_reservations_edit_button")}>
-                <EditIcon />
-              </IconButton>
-              <IconButton onClick={() => handleDeleteClick(reservation)} aria-label={t("prefs_reservations_delete_button")}>
-                <CloseIcon />
-              </IconButton>
+              <Tooltip title={t("prefs_reservations_edit_button")}>
+                <IconButton onClick={() => handleEditClick(reservation)} aria-label={t("prefs_reservations_edit_button")}>
+                  <EditIcon />
+                </IconButton>
+              </Tooltip>
+              <Tooltip title={t("prefs_reservations_delete_button")}>
+                <IconButton onClick={() => handleDeleteClick(reservation)} aria-label={t("prefs_reservations_delete_button")}>
+                  <CloseIcon />
+                </IconButton>
+              </Tooltip>
             </TableCell>
           </TableRow>
         ))}