In-App Docs: tooltips

src/components/DeleteRoomButton.tsx

@@ -1,7 +1,7 @@
 import ActionCheck from "@mui/icons-material/CheckCircle";
 import ActionDelete from "@mui/icons-material/Delete";
 import AlertError from "@mui/icons-material/ErrorOutline";
-import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from "@mui/material";
+import { Button, Tooltip, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from "@mui/material";
 import { Fragment, useState } from "react";
 import {
   SimpleForm,
@@ -63,22 +63,24 @@ const DeleteRoomButton: React.FC<DeleteRoomButtonProps> = props => {
 
   return (
     <Fragment>
-      <Button
+      <Tooltip title={translate("ra.action.delete")}>
-        onClick={handleDialogOpen}
+        <Button
-        disabled={isLoading}
+          onClick={handleDialogOpen}
-        className={"ra-delete-button"}
+          disabled={isLoading}
-        key="button"
+          className={"ra-delete-button"}
-        size="small"
+          key="button"
-        sx={{
+          size="small"
-          "&.MuiButton-sizeSmall": {
+          sx={{
-            lineHeight: 1.5,
+            "&.MuiButton-sizeSmall": {
-          },
+              lineHeight: 1.5,
-        }}
+            },
-        color={"error"}
+          }}
-        startIcon={<ActionDelete />}
+          color={"error"}
-      >
+          startIcon={<ActionDelete />}
-        {translate("ra.action.delete")}
+        >
-      </Button>
+          {translate("ra.action.delete")}
+        </Button>
+      </Tooltip>
       <Dialog open={open} onClose={handleDialogClose}>
         <DialogTitle>{translate(props.confirmTitle)}</DialogTitle>
         <DialogContent>

src/components/DeleteUserButton.tsx

@@ -1,7 +1,7 @@
 import ActionCheck from "@mui/icons-material/CheckCircle";
 import ActionDelete from "@mui/icons-material/Delete";
 import AlertError from "@mui/icons-material/ErrorOutline";
-import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from "@mui/material";
+import { Tooltip, Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from "@mui/material";
 import { Fragment, useState } from "react";
 import {
   SimpleForm,
@@ -69,22 +69,24 @@ const DeleteUserButton: React.FC<DeleteUserButtonProps> = props => {
 
   return (
     <Fragment>
-      <Button
+      <Tooltip title={translate("ra.action.delete")}>
-        onClick={handleDialogOpen}
+        <Button
-        disabled={isLoading}
+          onClick={handleDialogOpen}
-        className={"ra-delete-button"}
+          disabled={isLoading}
-        key="button"
+          className={"ra-delete-button"}
-        size="small"
+          key="button"
-        sx={{
+          size="small"
-          "&.MuiButton-sizeSmall": {
+          sx={{
-            lineHeight: 1.5,
+            "&.MuiButton-sizeSmall": {
-          },
+              lineHeight: 1.5,
-        }}
+            },
-        color={"error"}
+          }}
-        startIcon={<ActionDelete />}
+          color={"error"}
-      >
+          startIcon={<ActionDelete />}
-        {translate("ra.action.delete")}
+        >
-      </Button>
+          {translate("ra.action.delete")}
+        </Button>
+      </Tooltip>
       <Dialog open={open} onClose={handleDialogClose}>
         <DialogTitle>{translate(props.confirmTitle)}</DialogTitle>
         <DialogContent>

src/components/DeviceRemoveButton.tsx

@@ -1,8 +1,11 @@
+import { Tooltip } from "@mui/material";
 import { DeleteWithConfirmButton, DeleteWithConfirmButtonProps, useRecordContext } from "react-admin";
+import { useTranslate } from "react-admin";
 
 import { isASManaged } from "../utils/mxid";
 
 export const DeviceRemoveButton = (props: DeleteWithConfirmButtonProps) => {
+  const translate = useTranslate();
   const record = useRecordContext();
   if (!record) return null;
 
@@ -12,19 +15,23 @@ export const DeviceRemoveButton = (props: DeleteWithConfirmButtonProps) => {
   }
 
   return (
-    <DeleteWithConfirmButton
+    <Tooltip
-      {...props}
+      title={isASManagedUser ? translate("resources.devices.action.erase.disabled") : translate("ra.action.delete")}
-      label="ra.action.remove"
+    >
-      confirmTitle="resources.devices.action.erase.title"
+      <DeleteWithConfirmButton
-      confirmContent="resources.devices.action.erase.content"
+        {...props}
-      mutationMode="pessimistic"
+        label="ra.action.remove"
-      redirect={false}
+        confirmTitle="resources.devices.action.erase.title"
-      disabled={isASManagedUser}
+        confirmContent="resources.devices.action.erase.content"
-      translateOptions={{
+        mutationMode="pessimistic"
-        id: record.id,
+        redirect={false}
-        name: record.display_name ? record.display_name : record.id,
+        disabled={isASManagedUser}
-      }}
+        translateOptions={{
-    />
+          id: record.id,
+          name: record.display_name ? record.display_name : record.id,
+        }}
+      />
+    </Tooltip>
   );
 };
 

src/components/ExperimentalFeatures.tsx

@@ -1,8 +1,6 @@
-import { Stack, Switch, Typography } from "@mui/material";
+import { Tooltip, Stack, Switch, Typography } from "@mui/material";
 import { useState, useEffect } from "react";
-import { useRecordContext } from "react-admin";
+import { useRecordContext, useTranslate, useNotify, useDataProvider } from "react-admin";
-import { useNotify } from "react-admin";
-import { useDataProvider } from "react-admin";
 
 import { ExperimentalFeaturesModel, SynapseDataProvider } from "../synapse/dataProvider";
 
@@ -15,6 +13,7 @@ const ExperimentalFeatureRow = (props: {
   featureValue: boolean;
   updateFeature: (feature_name: string, feature_value: boolean) => void;
 }) => {
+  const translate = useTranslate();
   const featureKey = props.featureKey;
   const featureValue = props.featureValue;
   const featureDescription = experimentalFeaturesMap[featureKey] ?? "";
@@ -34,7 +33,9 @@ const ExperimentalFeatureRow = (props: {
         padding: 2,
       }}
     >
-      <Switch checked={checked} onChange={handleChange} />
+      <Tooltip title={translate("resources.experimental_features.action.toggle")}>
+        <Switch checked={checked} onChange={handleChange} />
+      </Tooltip>
       <Stack>
         <Typography
           variant="subtitle1"

src/components/media.tsx

@@ -50,10 +50,14 @@ const DeleteMediaDialog = ({ open, onClose, onSubmit }) => {
 
   const DeleteMediaToolbar = (props: ToolbarProps) => (
     <Toolbar {...props}>
-      <SaveButton label="delete_media.action.send" icon={<DeleteSweepIcon />} />
+      <Tooltip title={translate("delete_media.helper.send")}>
-      <Button label="ra.action.cancel" onClick={onClose}>
+        <SaveButton label="delete_media.action.send" icon={<DeleteSweepIcon />} />
-        <IconCancel />
+      </Tooltip>
-      </Button>
+      <Tooltip title={translate("ra.action.cancel")}>
+        <Button label="ra.action.cancel" onClick={onClose}>
+          <IconCancel />
+        </Button>
+      </Tooltip>
     </Toolbar>
   );
 
@@ -63,9 +67,20 @@ const DeleteMediaDialog = ({ open, onClose, onSubmit }) => {
       <DialogContent>
         <DialogContentText>{translate("delete_media.helper.send")}</DialogContentText>
         <SimpleForm toolbar={<DeleteMediaToolbar />} onSubmit={onSubmit}>
-          <DateTimeInput source="before_ts" label="delete_media.fields.before_ts" defaultValue={0} parse={dateParser} />
+          <Tooltip title={translate("delete_media.helper.before_ts")}>
-          <NumberInput source="size_gt" label="delete_media.fields.size_gt" defaultValue={0} min={0} step={1024} />
+            <DateTimeInput
-          <BooleanInput source="keep_profiles" label="delete_media.fields.keep_profiles" defaultValue={true} />
+              source="before_ts"
+              label="delete_media.fields.before_ts"
+              defaultValue={0}
+              parse={dateParser}
+            />
+          </Tooltip>
+          <Tooltip title={translate("delete_media.helper.size_gt")}>
+            <NumberInput source="size_gt" label="delete_media.fields.size_gt" defaultValue={0} min={0} step={1024} />
+          </Tooltip>
+          <Tooltip title={translate("delete_media.helper.keep_profiles")}>
+            <BooleanInput source="keep_profiles" label="delete_media.fields.keep_profiles" defaultValue={true} />
+          </Tooltip>
         </SimpleForm>
       </DialogContent>
     </Dialog>
@@ -76,6 +91,7 @@ export const DeleteMediaButton = (props: ButtonProps) => {
   const theme = useTheme();
   const [open, setOpen] = useState(false);
   const notify = useNotify();
+  const translate = useTranslate();
   const dataProvider = useDataProvider<SynapseDataProvider>();
   const { mutate: deleteMedia, isPending } = useMutation({
     mutationFn: (values: DeleteMediaParams) => dataProvider.deleteMedia(values),
@@ -95,24 +111,26 @@ export const DeleteMediaButton = (props: ButtonProps) => {
 
   return (
     <>
-      <Button
+      <Tooltip title={translate("delete_media.helper.send")}>
-        {...props}
+        <Button
-        label="delete_media.action.send"
+          {...props}
-        onClick={openDialog}
+          label="delete_media.action.send"
-        disabled={isPending}
+          onClick={openDialog}
-        sx={{
+          disabled={isPending}
-          color: theme.palette.error.main,
+          sx={{
-          "&:hover": {
+            color: theme.palette.error.main,
-            backgroundColor: alpha(theme.palette.error.main, 0.12),
+            "&:hover": {
-            // Reset on mouse devices
+              backgroundColor: alpha(theme.palette.error.main, 0.12),
-            "@media (hover: none)": {
+              // Reset on mouse devices
-              backgroundColor: "transparent",
+              "@media (hover: none)": {
+                backgroundColor: "transparent",
+              },
             },
-          },
+          }}
-        }}
+        >
-      >
+          <DeleteSweepIcon />
-        <DeleteSweepIcon />
+        </Button>
-      </Button>
+      </Tooltip>
       <DeleteMediaDialog open={open} onClose={closeDialog} onSubmit={deleteMedia} />
     </>
   );
@@ -123,10 +141,14 @@ const PurgeRemoteMediaDialog = ({ open, onClose, onSubmit }) => {
 
   const PurgeRemoteMediaToolbar = (props: ToolbarProps) => (
     <Toolbar {...props}>
-      <SaveButton label="purge_remote_media.action.send" icon={<DeleteSweepIcon />} />
+      <Tooltip title={translate("purge_remote_media.helper.send")}>
-      <Button label="ra.action.cancel" onClick={onClose}>
+        <SaveButton label="purge_remote_media.action.send" icon={<DeleteSweepIcon />} />
-        <IconCancel />
+      </Tooltip>
-      </Button>
+      <Tooltip title={translate("ra.action.cancel")}>
+        <Button label="ra.action.cancel" onClick={onClose}>
+          <IconCancel />
+        </Button>
+      </Tooltip>
     </Toolbar>
   );
 
@@ -152,6 +174,7 @@ export const PurgeRemoteMediaButton = (props: ButtonProps) => {
   const theme = useTheme();
   const [open, setOpen] = useState(false);
   const notify = useNotify();
+  const translate = useTranslate();
   const dataProvider = useDataProvider<SynapseDataProvider>();
   const { mutate: purgeRemoteMedia, isPending } = useMutation({
     mutationFn: (values: DeleteMediaParams) => dataProvider.purgeRemoteMedia(values),
@@ -171,22 +194,24 @@ export const PurgeRemoteMediaButton = (props: ButtonProps) => {
 
   return (
     <>
-      <Button
+      <Tooltip title={translate("purge_remote_media.helper.send")}>
-        {...props}
+        <Button
-        label="purge_remote_media.action.send"
+          {...props}
-        onClick={openDialog}
+          label="purge_remote_media.action.send"
-        disabled={isPending}
+          onClick={openDialog}
-        sx={{
+          disabled={isPending}
-          "&:hover": {
+          sx={{
-            // Reset on mouse devices
+            "&:hover": {
-            "@media (hover: none)": {
+              // Reset on mouse devices
-              backgroundColor: "transparent",
+              "@media (hover: none)": {
+                backgroundColor: "transparent",
+              },
             },
-          },
+          }}
-        }}
+        >
-      >
+          <DeleteSweepIcon />
-        <DeleteSweepIcon />
+        </Button>
-      </Button>
+      </Tooltip>
       <PurgeRemoteMediaDialog open={open} onClose={closeDialog} onSubmit={purgeRemoteMedia} />
     </>
   );
@@ -462,6 +487,7 @@ export const ViewMediaButton = ({ mxcURL, label, uploadName, mimetype }) => {
 };
 
 export const MediaIDField = ({ source }) => {
+  const translate = useTranslate();
   const record = useRecordContext();
   if (!record) {
     return null;
@@ -484,10 +510,15 @@ export const MediaIDField = ({ source }) => {
     mxcURL = `mxc://${homeserver}/${mediaID}`;
   }
 
-  return <ViewMediaButton mxcURL={mxcURL} label={mediaID} uploadName={uploadName} mimetype={record.media_type} />;
+  return (
+    <Tooltip title={translate("resources.users_media.action.open")}>
+      <ViewMediaButton mxcURL={mxcURL} label={mediaID} uploadName={uploadName} mimetype={record.media_type} />
+    </Tooltip>
+  );
 };
 
 export const ReportMediaContent = ({ source }) => {
+  const translate = useTranslate();
   const record = useRecordContext();
   if (!record) {
     return null;
@@ -503,5 +534,9 @@ export const ReportMediaContent = ({ source }) => {
     uploadName = decodeURLComponent(get(record, "event_json.content.body")?.toString());
   }
 
-  return <ViewMediaButton mxcURL={mxcURL} label={mxcURL} uploadName={uploadName} mimetype={record.media_type} />;
+  return (
+    <Tooltip title={translate("resources.users_media.action.open")}>
+      <ViewMediaButton mxcURL={mxcURL} label={mxcURL} uploadName={uploadName} mimetype={record.media_type} />
+    </Tooltip>
+  );
 };