#209 Add (optional) tooltips to icons (#211)

Author: CarlosNZ

README.md

@@ -196,6 +196,7 @@ This is a reference list of *all* possible props, divided into related sections.
 | ----------------------- | ----------------------------------------- | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `theme`                 | `ThemeInput`                              | `defaultTheme`       | Either one of the built-in themes (imported separately), or an object specifying some or all theme properties — see [Themes](#themes--styles).                                                                                                                                                                                                                                                            |
 | `icons`                 | `{[iconName]: JSX.Element, ... }`         | `{ }`                | Replace the built-in icons by specifying them here — see [Themes](#themes--styles).                                                                                                                                                                                                                                                                                                                       |  |
+| `showIconTooltips`      | `boolean`                                 | false                | Display icon tooltips when hovering.                                                                                                                                                                                                                                                                                                                                                                      |  |
 | `indent`                | `number`                                  | `3`                  | Specify the amount of indentation for each level of nesting in the displayed data.                                                                                                                                                                                                                                                                                                                        |
 | `collapse`              | `boolean\|number\|FilterFunction`         | `false`              | Defines which nodes of the JSON tree will be displayed "opened" in the UI on load — see [Collapse](#collapse).                                                                                                                                                                                                                                                                                            |
 | `collapseAnimationTime` | `number`                                  | `300`                | Time (in milliseconds) for the transition animation when collapsing collection nodes.                                                                                                                                                                                                                                                                                                                     |
@@ -914,6 +915,11 @@ Localise your implementation (or just customise the default messages) by passing
   DEFAULT_NEW_KEY: 'key',
   SHOW_LESS: '(Show less)',
   EMPTY_STRING: '<empty string>' // Displayed when property key is ""
+  // Tooltips only appear if `showIconTooltips` prop is enabled
+  TOOLTIP_COPY: 'Copy to clipboard',
+  TOOLTIP_EDIT: 'Edit',
+  TOOLTIP_DELETE: 'Delete',
+  TOOLTIP_ADD: 'Add',
 }
 ```
 

demo/src/App.tsx

@@ -600,6 +600,7 @@ function App() {
                 // translations={{
                 //   EMPTY_STRING: 'Nah',
                 // }}
+                showIconTooltips
               />
             </Suspense>
           </Box>

src/ButtonPanels.tsx

@@ -36,6 +36,7 @@ interface EditButtonProps {
     // eslint-disable-next-line
     replacer?: (this: any, key: string, value: unknown) => string
   ) => string
+  showIconTooltips: boolean
 }
 
 export const EditButtons: React.FC<EditButtonProps> = ({
@@ -52,6 +53,7 @@ export const EditButtons: React.FC<EditButtonProps> = ({
   editConfirmRef,
   getNewKeyOptions,
   jsonStringify,
+  showIconTooltips,
 }) => {
   const { getStyles } = useTheme()
   const NEW_KEY_PROMPT = translate('KEY_NEW', nodeData)
@@ -160,17 +162,27 @@ export const EditButtons: React.FC<EditButtonProps> = ({
       onClick={(e) => e.stopPropagation()}
     >
       {enableClipboard && (
-        <div onClick={handleCopy} className="jer-copy-pulse">
+        <div
+          onClick={handleCopy}
+          className="jer-copy-pulse"
+          title={showIconTooltips ? translate('TOOLTIP_COPY', nodeData) : ''}
+        >
           <Icon name="copy" nodeData={nodeData} />
         </div>
       )}
       {startEdit && (
-        <div onClick={startEdit}>
+        <div
+          onClick={startEdit}
+          title={showIconTooltips ? translate('TOOLTIP_EDIT', nodeData) : ''}
+        >
           <Icon name="edit" nodeData={nodeData} />
         </div>
       )}
       {handleDelete && (
-        <div onClick={handleDelete}>
+        <div
+          onClick={handleDelete}
+          title={showIconTooltips ? translate('TOOLTIP_DELETE', nodeData) : ''}
+        >
           <Icon name="delete" nodeData={nodeData} />
         </div>
       )}
@@ -181,6 +193,7 @@ export const EditButtons: React.FC<EditButtonProps> = ({
             // For arrays, we don't need to add a key
             else handleAdd('')
           }}
+          title={showIconTooltips ? translate('TOOLTIP_ADD', nodeData) : ''}
         >
           <Icon name="add" nodeData={nodeData} />
         </div>

src/CollectionNode.tsx

@@ -47,6 +47,7 @@ export const CollectionNode: React.FC<CollectionNodeProps> = (props) => {
     collapseAnimationTime,
     onMove,
     enableClipboard,
+    showIconTooltips,
     searchFilter,
     searchText,
     indent,
@@ -432,6 +433,7 @@ export const CollectionNode: React.FC<CollectionNodeProps> = (props) => {
       getNewKeyOptions={getNewKeyOptions}
       editConfirmRef={editConfirmRef}
       jsonStringify={jsonStringify}
+      showIconTooltips={showIconTooltips}
     />
   )
 

src/JsonEditor.tsx

@@ -63,6 +63,7 @@ const Editor: React.FC<JsonEditorProps> = ({
   keySort = false,
   showArrayIndices = true,
   showStringQuotes = true,
+  showIconTooltips = false,
   defaultValue = null,
   newKeyOptions,
   minWidth = 250,
@@ -366,6 +367,7 @@ const Editor: React.FC<JsonEditorProps> = ({
     sort,
     showArrayIndices,
     showStringQuotes,
+    showIconTooltips,
     indent,
     defaultValue,
     newKeyOptions,

src/ValueNodeWrapper.tsx

@@ -49,6 +49,7 @@ export const ValueNodeWrapper: React.FC<ValueNodeProps> = (props) => {
     sort,
     editConfirmRef,
     jsonStringify,
+    showIconTooltips,
   } = props
   const { getStyles } = useTheme()
   const {
@@ -388,6 +389,7 @@ export const ValueNodeWrapper: React.FC<ValueNodeProps> = (props) => {
                 keyboardControls={keyboardControls}
                 editConfirmRef={editConfirmRef}
                 jsonStringify={jsonStringify}
+                showIconTooltips={showIconTooltips}
               />
             )
           )}

src/localisation.ts

@@ -15,6 +15,10 @@ const localisedStrings = {
   DEFAULT_NEW_KEY: 'key',
   SHOW_LESS: '(Show less)',
   EMPTY_STRING: '<empty string>',
+  TOOLTIP_COPY: 'Copy to clipboard',
+  TOOLTIP_EDIT: 'Edit',
+  TOOLTIP_DELETE: 'Delete',
+  TOOLTIP_ADD: 'Add',
 }
 
 export type LocalisedStrings = typeof localisedStrings

src/types.ts

@@ -38,6 +38,7 @@ export interface JsonEditorProps {
   keySort?: boolean | CompareFunction
   showArrayIndices?: boolean
   showStringQuotes?: boolean
+  showIconTooltips?: boolean
   defaultValue?: string | number | boolean | null | object | DefaultValueFunction
   newKeyOptions?: string[] | NewKeyOptionsFunction
   minWidth?: string | number
@@ -257,6 +258,7 @@ interface BaseNodeProps {
   onDelete: InternalUpdateFunction
   onError?: OnErrorFunction
   showErrorMessages: boolean
+  showIconTooltips: boolean
   onMove: InternalMoveFunction
   enableClipboard: boolean | CopyFunction
   restrictEditFilter: FilterFunction