chore: tooltips

packages/web/src/javascripts/Components/Button/RoundIconButton.tsx

@@ -1,7 +1,8 @@
-import { ForwardedRef, forwardRef, MouseEventHandler } from 'react'
+import { ComponentPropsWithoutRef, ForwardedRef, forwardRef, MouseEventHandler } from 'react'
 import Icon from '@/Components/Icon/Icon'
 import { IconType } from '@standardnotes/snjs'
 import { classNames } from '@standardnotes/utils'
+import StyledTooltip from '../StyledTooltip/StyledTooltip'
 
 type Props = {
   onClick: () => void
@@ -10,30 +11,35 @@ type Props = {
   iconClassName?: string
   label: string
   id?: string
-}
+} & ComponentPropsWithoutRef<'button'>
 
 const RoundIconButton = forwardRef(
-  ({ onClick, className, icon: iconType, iconClassName, id, label }: Props, ref: ForwardedRef<HTMLButtonElement>) => {
+  (
+    { onClick, className, icon: iconType, iconClassName, id, label, ...props }: Props,
+    ref: ForwardedRef<HTMLButtonElement>,
+  ) => {
     const click: MouseEventHandler = (e) => {
       e.preventDefault()
       onClick()
     }
     return (
-      <button
+      <StyledTooltip label={label}>
-        className={classNames(
+        <button
-          'bg-text-padding m-0 flex h-10 min-w-10 cursor-pointer items-center justify-center rounded-full border',
+          className={classNames(
-          'border-solid border-border bg-clip-padding text-neutral hover:bg-contrast hover:text-text focus:bg-contrast',
+            'bg-text-padding m-0 flex h-10 min-w-10 cursor-pointer items-center justify-center rounded-full border',
-          'focus:text-text focus:outline-none focus:ring-info md:h-8 md:min-w-8',
+            'border-solid border-border bg-clip-padding text-neutral hover:bg-contrast hover:text-text focus:bg-contrast',
-          className,
+            'focus:text-text focus:outline-none focus:ring-info md:h-8 md:min-w-8',
-        )}
+            className,
-        onClick={click}
+          )}
-        ref={ref}
+          onClick={click}
-        id={id}
+          ref={ref}
-        title={label}
+          id={id}
-        aria-label={label}
+          aria-label={label}
-      >
+          {...props}
-        <Icon type={iconType} className={iconClassName} />
+        >
-      </button>
+          <Icon type={iconType} className={iconClassName} />
+        </button>
+      </StyledTooltip>
     )
   },
 )

packages/web/src/javascripts/Components/ContentListView/Header/AddItemMenuButton.tsx

@@ -9,6 +9,7 @@ import { FilesController } from '@/Controllers/FilesController'
 import { PhotoRecorder } from '@/Controllers/Moments/PhotoRecorder'
 import { classNames } from '@standardnotes/snjs'
 import { useEffect, useRef, useState } from 'react'
+import StyledTooltip from '@/Components/StyledTooltip/StyledTooltip'
 
 type Props = {
   isDailyEntry: boolean
@@ -47,24 +48,25 @@ const AddItemMenuButton = ({
 
   return (
     <>
-      <button
+      <StyledTooltip label={addButtonLabel}>
-        className={classNames(
+        <button
-          'z-editor-title-bar hidden h-8 w-8 cursor-pointer items-center justify-center rounded-full border border-solid border-transparent hover:brightness-125 md:flex',
+          className={classNames(
-          isDailyEntry ? 'bg-danger text-danger-contrast' : 'bg-info text-info-contrast',
+            'z-editor-title-bar hidden h-8 w-8 cursor-pointer items-center justify-center rounded-full border border-solid border-transparent hover:brightness-125 md:flex',
-        )}
+            isDailyEntry ? 'bg-danger text-danger-contrast' : 'bg-info text-info-contrast',
-        title={addButtonLabel}
+          )}
-        aria-label={addButtonLabel}
+          aria-label={addButtonLabel}
-        onClick={() => {
+          onClick={() => {
-          if (canShowMenu) {
+            if (canShowMenu) {
-            setIsMenuOpen((isOpen) => !isOpen)
+              setIsMenuOpen((isOpen) => !isOpen)
-          } else {
+            } else {
-            addNewItem()
+              addNewItem()
-          }
+            }
-        }}
+          }}
-        ref={addItemButtonRef}
+          ref={addItemButtonRef}
-      >
+        >
-        <Icon type="add" size="custom" className="h-5 w-5" />
+          <Icon type="add" size="custom" className="h-5 w-5" />
-      </button>
+        </button>
+      </StyledTooltip>
       <Popover
         title="Add item"
         open={canShowMenu && isMenuOpen}

packages/web/src/javascripts/Components/ContentListView/Header/SearchButton.tsx

@@ -50,7 +50,7 @@ const SearchButton = ({ itemListController }: Props) => {
           setIsSearchBarVisible(!isSearchBarVisible)
         }}
         icon={isSearchBarVisible ? 'close' : 'search'}
-        label="Display options menu"
+        label="Search"
       />
     </>
   )

packages/web/src/javascripts/Components/LinkedItems/LinkedItemsButton.tsx

@@ -5,7 +5,6 @@ import { observer } from 'mobx-react-lite'
 import { useRef, useCallback } from 'react'
 import RoundIconButton from '../Button/RoundIconButton'
 import Popover from '../Popover/Popover'
-import StyledTooltip from '../StyledTooltip/StyledTooltip'
 import LinkedItemsPanel from './LinkedItemsPanel'
 
 type Props = {
@@ -33,9 +32,7 @@ const LinkedItemsButton = ({ linkingController, filesController, onClickPreproce
 
   return (
     <>
-      <StyledTooltip label="Linked items panel">
+      <RoundIconButton label="Linked items panel" onClick={toggleMenu} ref={buttonRef} icon="link" />
-        <RoundIconButton label="Linked items panel" onClick={toggleMenu} ref={buttonRef} icon="link" />
-      </StyledTooltip>
       <Popover
         title="Linked items"
         togglePopover={toggleMenu}